<template>
    <!-- 显示在中间拖动区域的内容-->
    <div>

        <div class="box-card widget-form-container " shadow="hover">
            <div class="text item">
                <el-form :size="data.config.size" label-suffix=":" :label-position="data.config.labelPosition"

                         :label-width="data.config.labelWidth + 'px'">

                    <div class="form-design-middle">
                        <div class="form-design-middle-inner">
                            <div class="phone-wrapper">
                                <div class="phone-wrapper-screen" style="width: 314.848px;">
                                  <div class="field-list-header">{{data.config.formName}}</div>
                                    <div class="field-list">

                                        <draggable class=""
                                                   v-model="data.list"
                                                   v-bind="{group:'people', ghostClass: 'ghost',animation: 200, handle: '.drag-widget'}"
                                                   @add="handleWidgetAdd">
                                            <!-- transition-group 元素之间拖拽换位动画的实现 -->
                                            <transition-group name="fade" tag="div"
                                                              class="widget-form-list">
                                                <template v-for="(element, index) in data.list"
                                                          v-if="element && element.key">

                                                    <widget-block
                                                            v-if="element.type == 'block'"
                                                            :key="element.key"
                                                            :element="element"
                                                            :select.sync="selectWidget"
                                                            :index="index" :data="data"
                                                            @select-change="handleSelectChange"
                                                    >
                                                    </widget-block>
                                                    <widget-card
                                                            v-else-if="element.type == 'card'"
                                                            :key="element.key"
                                                            :element="element"
                                                            :select.sync="selectWidget"
                                                            :index="index" :data="data"
                                                            @select-change="handleSelectChange"
                                                    >
                                                    </widget-card>

                                                    <!-- 生成子表走的组件 -->
                                                    <widget-table
                                                            v-else-if="element.type == 'table'"
                                                            :key="element.key"
                                                            :element="element"
                                                            :select.sync="selectWidget"
                                                            :index="index" :data="data"
                                                            @select-change="handleSelectChange"
                                                    >
                                                    </widget-table>
                                                    <!--              tabs-->
                                                    <tabs-block
                                                            v-else-if="element.type == 'tabs'"
                                                            :key="element.key"
                                                            :element="element"
                                                            :select.sync="selectWidget"
                                                            :index="index" :data="data"
                                                            @select-change="handleSelectChange"
                                                    >
                                                    </tabs-block>
                                                    <collapse-block
                                                            v-else-if="element.type == 'collapse'"
                                                            :key="element.key"
                                                            :element="element"
                                                            :select.sync="selectWidget"
                                                            :index="index" :data="data"
                                                            @select-change="handleSelectChange"
                                                    >
                                                    </collapse-block>

                                                    <div-block
                                                            v-else-if="element.type == 'div'"
                                                            :key="element.key"
                                                            :element="element"
                                                            :select.sync="selectWidget"
                                                            :index="index" :data="data"
                                                            @select-change="handleSelectChange"
                                                    >
                                                    </div-block>

                                                    <!-- 生成单行,多行等的组件 -->
                                                    <widget-form-item
                                                            v-else-if="element.type !== 'grid' && element.type !== 'subTable'"
                                                            :key="element.key"
                                                            :element="element"
                                                            :select.sync="selectWidget"
                                                            :index="index" :data="data"
                                                            @select-change="handleSelectChange"
                                                    >
                                                        <el-row></el-row>
                                                    </widget-form-item>
                                                    <widget-col-item
                                                            v-else
                                                            :key="element.key"
                                                            :element="element"
                                                            :select.sync="selectWidget"
                                                            :index="index" :data="data"
                                                            @select-change="handleSelectChange"
                                                    >


                                                    </widget-col-item>
                                                </template>
                                            </transition-group>

                                        </draggable>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                </el-form>
            </div>
        </div>


    </div>

</template>

<script>
    import Draggable from 'vuedraggable'
    import WidgetFormItem from './WidgetFormItem'
    import WidgetColItem from './WidgetColItem' // 子表生成组件
    import WidgetTable from './WidgetTable'

    export default {
        components: {
            Draggable,
            WidgetFormItem,
            WidgetColItem,
          WidgetTable
        },
        props: ['data', 'select'],
        data() {

            return {

                selectWidget: this.select,

            }
        },
        mounted() {
            if (document) {
                if (document.body) {
                    document.body.ondrop = function (event) {
                        let isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1
                        if (isFirefox) {
                            event.preventDefault()
                            event.stopPropagation()
                        }
                    }
                }
            }

        },
        methods: {
            handleWidgetChange(added, removed, moved) {

                return false
            },
            getData() {
                alert(1)
            },
            // 构造当前表单显示的内容
            handleWidgetAdd(evt) {
                const newIndex = evt.newIndex
                const to = evt.to
                // console.log(to)

                //为拖拽到容器的元素添加唯一 key
                const key = new Date().getTime() + ''
                this.$set(this.data.list, newIndex, {
                    ...this.data.list[newIndex],
                    options: {
                        ...this.data.list[newIndex].options,
                        remoteFunc: this.data.list[newIndex].options.remoteFunc || 'func_' + key
                    },
                    key,
                    // 绑定键值
                    model: this.data.list[newIndex].model ? this.data.list[newIndex].model : this.data.list[newIndex].type + '_' + key,
                    rules: this.data.list[newIndex].rules ? [...this.data.list[newIndex].rules] : []
                })

                if (Object.keys(this.data.list[newIndex].options).includes('options')) {
                    this.$set(this.data.list, newIndex, {
                        ...this.data.list[newIndex],
                        options: {
                            ...this.data.list[newIndex].options,
                            options: [...this.data.list[newIndex].options.options.map(item => ({
                                ...item
                            }))]
                        }
                    })
                }

                if (Object.keys(this.data.list[newIndex]).includes('columns')) {
                    this.$set(this.data.list, newIndex, {
                        ...this.data.list[newIndex],
                        columns: [...this.data.list[newIndex].columns.map(item => ({
                            ...item,
                            list: [...item.list]
                        }))]
                    })
                }

                if (Object.keys(this.data.list[newIndex]).includes('tableColumns')) {
                    this.$set(this.data.list, newIndex, {
                        ...this.data.list[newIndex],
                        tableColumns: [...this.data.list[newIndex].tableColumns]
                    })
                }

                this.selectWidget = this.data.list[newIndex]
            },
            handleWidgetDelete(index) {
                if (this.data.list.length - 1 === index) {
                    if (index === 0) {
                        this.selectWidget = {}
                    } else {
                        this.selectWidget = this.data.list[index - 1]
                    }
                } else {
                    this.selectWidget = this.data.list[index + 1]
                }

                this.$nextTick(() => {
                    this.data.list.splice(index, 1)
                })
            },
            handleSelectChange(index) {
                //console.log('select-change', index)
                setTimeout(() => {
                    index >= 0 ? (this.selectWidget = this.data.list[index]) : (this.selectWidget = {})
                })
            }
        },
        watch: {

            select(val) {

                //  console.log(val,11);
                this.selectWidget = val
            },
            // 监听变化重写字段属性文件
            selectWidget: {
                handler(val) {
                    this.$emit('update:select', val)
                },
                deep: true
            }
        }

    }
</script>

<style lang="scss" scoped>
    .approval-select {
        display: inline-block
    }

    .approval-select .ant-select-arrow {
        margin-top: -3px
    }

    .approval-select .icon-dropdown {
        width: 8px;
        height: 6px;
        margin-top: -2px;
        color: #141f33
    }

    .selected-panel {
        height: 100%;
        overflow: auto
    }

    .selected-panel .item {
        display: flex;
        height: 40px;
        align-items: center;
        padding: 1em
    }

    .selected-panel .item:hover {
        background-color: #f7f9fc
    }

    .selected-panel .ant-list-header {
        padding: 1em
    }

    .selected-panel .title {
        flex: auto
    }

    .selected-panel .operate {
        flex: none
    }

    .group-member-tree .search {
        margin: .5em;
        width: calc(100% - 1em)
    }

    .group-member-tree .search .search-icon {
        font-size: 14px;
        color: #c3c5cb
    }

    .group-member-tree .search:focus, .group-member-tree .search:hover {
        outline: none;
        box-shadow: none
    }

    .group-member-tree .search .ant-input {
        border-radius: 5px;
        border-width: 0;
        background-color: #f6f6f7;
        border-color: #f6f6f7
    }

    .group-member-tree .search .ant-input:focus, .group-member-tree .search .ant-input:hover {
        outline: none;
        box-shadow: none;
        border-color: #f6f6f7
    }

    .group-member-tree .department-member-tree {
        min-height: 310px
    }

    .group-member-tree .department-member-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected, .group-member-tree .department-member-tree li .ant-tree-node-content-wrapper:hover {
        background-color: inherit
    }

    .group-member-tree .department-member-tree.ant-tree.ant-tree-show-line li span.ant-tree-switcher-noop, .group-member-tree .department-member-tree li span.ant-tree-switcher-noop {
        background: transparent
    }

    .group-member-tree .department-member-tree.ant-tree.ant-tree-show-line li:before {
        content: " ";
        width: 1px;
        border-left: 1px solid #e9eaf2;
        height: 100%;
        position: absolute;
        left: 12px;
        top: 0;
        margin: 0
    }

    .group-member-tree .department-member-tree.ant-tree.ant-tree-show-line li {
        padding: 0
    }

    .group-member-tree .department-member-tree.ant-tree.ant-tree-show-line li:last-child:before {
        height: 20px;
        bottom: 8px
    }

    .group-member-tree .department-member-tree.ant-tree.ant-tree-show-line li ul {
        padding-left: 24px
    }

    .group-member-tree .department-member-tree.ant-tree.ant-tree-show-line li span.ant-tree-checkbox, .group-member-tree .department-member-tree.ant-tree.ant-tree-show-line li span.ant-tree-switcher {
        top: 8px
    }

    .group-member-tree .department-member-tree.ant-tree.ant-tree-show-line li .ant-tree-node-content-wrapper {
        height: 40px;
        line-height: 40px
    }

    .group-member-tree .department-member-tree.ant-tree.ant-tree-show-line.ant-tree-icon-hide > li:first-child:before {
        height: calc(100% - 12px);
        top: 20px
    }

    .group-member-tree .department-member-tree.ant-tree.ant-tree-show-line li .ant-tree-switcher-noop > i {
        visibility: hidden
    }

    .group-member-tree .department-member-tree.ant-tree.ant-tree-show-line li .ant-tree-switcher-noop:after {
        content: " ";
        height: 1px;
        border-bottom: 1px solid #d9d9d9;
        width: 10px;
        position: absolute;
        left: 12px;
        top: 50%;
        margin: 0
    }

    .group-member-tree .department-member-tree.ant-tree.ant-tree-show-line .anticon.anticon-minus-square.ant-tree-switcher-line-icon:after {
        font-family: iconfont-approval-admin !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: "\E646";
        line-height: 1em;
        height: 1em;
        width: 1em;
        position: absolute;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        -webkit-transition: -webkit-transform .5s;
        transition: -webkit-transform .5s;
        transition: transform .5s;
        transition: transform .5s, -webkit-transform .5s
    }

    .group-member-tree .department-member-tree.ant-tree.ant-tree-show-line .anticon.anticon-minus-square.ant-tree-switcher-line-icon svg {
        display: none
    }

    .group-member-tree .department-member-tree.ant-tree.ant-tree-show-line .anticon.anticon-plus-square.ant-tree-switcher-line-icon:after {
        font-family: iconfont-approval-admin !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: "\E646";
        line-height: 1em;
        height: 1em;
        width: 1em;
        position: absolute;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
        -webkit-transition: -webkit-transform .5s;
        transition: -webkit-transform .5s;
        transition: transform .5s;
        transition: transform .5s, -webkit-transform .5s
    }

    .group-member-tree .department-member-tree.ant-tree.ant-tree-show-line .anticon.anticon-plus-square.ant-tree-switcher-line-icon svg {
        display: none
    }

    .member-search-tip {
        margin-top: 6px;
        font-size: 14px;
        color: #646a73
    }

    .applicant-selector.department-mode .ant-modal-header {
        padding: 24px;
        border-bottom: none
    }

    .applicant-selector.department-mode .ant-modal-body {
        padding-top: 0
    }

    .applicant-selector.department-mode.single-department .ant-tree-checkbox-checked:after, .applicant-selector.department-mode.single-department .ant-tree-checkbox-inner {
        border-radius: 50%
    }

    .visibility-picker-modal .ant-modal-header {
        border-bottom: none;
        padding: 24px
    }

    .visibility-picker-modal .ant-modal-body {
        padding-top: 0;
        padding-bottom: 0
    }

    .visibility-picker-modal .ant-modal-footer {
        border-top: none;
        padding: 24px
    }

    .visibility-picker-modal .ant-modal-footer .ant-btn {
        width: 100px
    }

    .visibility-picker {
        display: flex;
        height: 440px;
        border: 1px solid #e4e5e7;
        border-radius: 4px
    }

    .visibility-picker-left {
        width: 50%;
        height: 100%;
        padding: 8px 8px 0;
        overflow-y: auto;
        border-right: 1px solid #e4e5e7
    }

    .visibility-picker-right {
        width: 50%
    }

    .form-item, .visibility-select .ant-select, .visibility-select .approval-select {
        display: block
    }

    .form-item {
        position: relative;
        margin-bottom: 24px
    }

    .form-item-label {
        margin-bottom: 8px;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #1f2329
    }

    .form-item-required .form-item-label span {
        position: relative
    }

    .form-item-required .form-item-label span:after {
        content: "*";
        position: absolute;
        top: 0;
        left: 100%;
        padding: 2px;
        color: #f54a45
    }

    .form-item-error {
        margin-bottom: 4px
    }

    .form-item-error .ant-input, .form-item-error .ant-select-selection.ant-select-selection--single {
        border-color: #f54a45
    }

    .form-item-error-msg {
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #f54a45
    }

    .form-item-warn {
        margin-bottom: 4px
    }

    .form-item-warn .ant-input, .form-item-warn .ant-select-selection.ant-select-selection--single {
        border-color: #faad14
    }

    .form-item-warn-msg {
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #faad14
    }

    .workbench-config-group-wrapper .approval-select {
        display: block
    }

    .workbench-config-tooltip-icon {
        margin-left: 4px;
        color: #9a999e
    }

    .workbench-config-enable-title {
        display: flex;
        align-items: center;
        justify-content: flex-start
    }

    .workbench-config-tooltip-wrapper .ant-popover-content {
        border-radius: 8px;
        overflow: hidden
    }

    .workbench-config-tooltip-wrapper .ant-popover-content .ant-popover-arrow {
        border-color: #3370ff;
        bottom: 5px
    }

    .workbench-config-tooltip-wrapper .ant-popover-arrow {
        border-width: 10px
    }

    .workbench-config-tooltip-wrapper .ant-popover-inner-content {
        width: 280px;
        padding: 16px;
        background-color: #3370ff
    }

    .workbench-config-tooltip-overlay {
        position: relative
    }

    .workbench-config-tooltip-image {
        width: 248px;
        height: 310px
    }

    .workbench-config-tooltip-top {
        position: absolute;
        top: 8px;
        left: 38px;
        font-size: 16px;
        line-height: 22px;
        color: #212121;
        font-weight: 700
    }

    .workbench-config-tooltip-header {
        position: absolute;
        top: 112px;
        width: 100%;
        padding: 0 12px;
        cursor: default
    }

    .workbench-config-tooltip-header .title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 4px
    }

    .workbench-config-tooltip-header .title-main {
        color: #1f2329;
        font-weight: 700;
        font-size: 12px;
        line-height: 18px
    }

    .workbench-config-tooltip-header .tab {
        overflow: hidden;
        padding: 2px 0
    }

    .workbench-config-tooltip-header .tab-name {
        font-size: 12px;
        line-height: 16px;
        margin-right: 8px;
        color: #646a73
    }

    .workbench-config-tooltip-header .tab-name.active {
        color: #3370ff;
        display: inline-block
    }

    .workbench-config-tooltip-header .tab-name.active .tab-hairline {
        height: 1px;
        background-color: #3370ff;
        width: 20px;
        margin: 2px auto 0
    }

    .workbench-config-tooltip-icon-text {
        position: absolute;
        top: 205px;
        display: flex;
        margin-left: 10px;
        width: 100%
    }

    .workbench-config-tooltip-icon-text .icon-name {
        opacity: .8;
        text-align: center;
        width: 48px;
        color: #1f2329;
        font-size: 12px;
        margin-right: 12px;
        line-height: 1;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .workbench-config-tooltip-icon-text.top-icon {
        top: 86px
    }

    .workbench-config-tooltip-icon-text.top-icon .icon-name {
        opacity: .4
    }

    .workbench-config-tooltip-text {
        color: #fff;
        font-size: 12px;
        line-height: 18px;
        margin-top: 8px
    }

    .group-member-picker-member-item .group-member-picker-member-item-header {
        display: flex;
        position: relative;
        height: 56px;
        padding: 12px 20px 12px 0;
        align-items: center;
        background-color: #fff;
        -webkit-transition: background-color .3s ease;
        transition: background-color .3s ease
    }

    .group-member-picker-member-item .group-member-picker-member-item-header:hover {
        background-color: #eee
    }

    .group-member-picker-member-item .group-member-picker-member-item-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        overflow: hidden
    }

    .group-member-picker-member-item .group-member-picker-member-item-avatar img {
        width: 100%;
        height: 100%
    }

    .group-member-picker-member-item .group-member-picker-member-item-main {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        height: 32px;
        padding-left: 8px
    }

    .group-member-picker-member-item .group-member-picker-member-item-title {
        font-size: 14px;
        line-height: 20px;
        color: #161f31
    }

    .group-member-picker-member-item .group-member-picker-member-item-sub-title {
        font-size: 12px;
        line-height: 12px;
        color: #7f838b
    }

    .group-member-picker-member-item .group-member-picker-member-item-operator {
        cursor: pointer
    }

    .group-member-picker-group-item .group-member-picker-group-item-header {
        display: flex;
        align-items: center;
        position: relative;
        height: 56px;
        padding-right: 20px;
        background-color: #fff;
        -webkit-transition: background-color .3s ease;
        transition: background-color .3s ease
    }

    .group-member-picker-group-item .group-member-picker-group-item-header:hover {
        background-color: #eee
    }

    .group-member-picker-group-item .group-member-picker-group-item-fold-button {
        position: absolute;
        top: calc(50% - 12px);
        left: 0;
        cursor: pointer
    }

    .group-member-picker-group-item .group-member-picker-group-item-fold-button .iconfont-approval-admin:before {
        display: block;
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        -webkit-transform: scale(.5) rotate(-90deg);
        transform: scale(.5) rotate(-90deg)
    }

    .group-member-picker-group-item .group-member-picker-group-item-fold-button.unfolded .iconfont-approval-admin:before {
        -webkit-transform: scale(.5) rotate(0deg);
        transform: scale(.5) rotate(0deg)
    }

    .group-member-picker-group-item .group-member-picker-group-item-fold-button + .group-member-picker-group-item-title {
        padding-left: 20px
    }

    .group-member-picker-group-item .group-member-picker-group-item-title {
        flex-grow: 1;
        height: 100%;
        font-size: 14px;
        line-height: 56px
    }

    .group-member-picker-group-item .group-member-picker-group-item-operator {
        cursor: pointer
    }

    .group-member-picker-group-item .group-member-picker-group-item-body {
        padding-left: 38px
    }

    .group-member-picker .group-member-picker-main {
        display: flex;
        height: 400px;
        border: 2px solid #ededf0;
        border-radius: 8px
    }

    .group-member-picker .group-member-picker-left {
        display: flex;
        flex-direction: column;
        width: 50%;
        border-right: 2px solid #ededf0
    }

    .group-member-picker .group-member-picker-left .group-member-picker-search-bar {
        padding: 16px
    }

    .group-member-picker .group-member-picker-left .group-member-picker-search-bar .ant-input {
        height: 32px;
        border-radius: 8px;
        background-color: #f6f6f7;
        border-color: #f6f6f7;
        border-width: 1px;
        box-shadow: none
    }

    .group-member-picker .group-member-picker-left .group-member-picker-search-bar .ant-input:focus {
        border-radius: 8px;
        background-color: #fff;
        border-color: #ededf0
    }

    .group-member-picker .group-member-picker-right {
        display: flex;
        flex-direction: column;
        width: 50%
    }

    .group-member-picker .group-member-picker-checked-summary {
        flex-shrink: 0;
        flex-grow: 0
    }

    .group-member-picker .group-member-picker-checked-length {
        padding: 18px 16px;
        font-size: 14px;
        line-height: 22px;
        color: #161f31
    }

    .group-member-picker .group-member-picker-candidate-list, .group-member-picker .group-member-picker-checked-list {
        padding: 16px;
        overflow-y: auto
    }

    .applicant-selector-modal .ant-modal-header {
        padding: 28px;
        border-bottom: none
    }

    .applicant-selector-modal .ant-modal-header .ant-modal-title {
        color: #161f31
    }

    .applicant-selector-modal .ant-modal-body {
        padding: 0 28px
    }

    .applicant-selector-modal .ant-modal-footer {
        padding: 28px;
        border-top: none;
        font-size: 14px
    }

    .applicant-selector-modal .ant-modal-footer .ant-btn {
        width: 100px;
        height: 32px;
        border-top: none;
        border-radius: 8px
    }

    .applicant-selector-modal .ant-modal-footer .applicant-selector-modal-confirm-button {
        margin-left: 16px;
        border: 2px solid #4c84f7;
        color: #fff;
        background-color: #4c84f7
    }

    .applicant-selector-modal .ant-modal-footer .applicant-selector-modal-cancel-button {
        border: 2px solid #ededf0;
        color: #161f31;
        background-color: #fff
    }

    .ApprovalInfo_permission.frozen .ant-btn:first-child {
        display: none
    }

    .ApprovalInfo_permission .ant-message {
        position: absolute !important
    }

    .ApprovalInfo_permission .ant-modal-header {
        background-color: #f6f6f7;
        border-bottom-width: 0
    }

    .ApprovalInfo_permission .ant-modal-body {
        padding: 24px 36px 0
    }

    .ApprovalInfo_permission .ant-modal-footer {
        border-top-width: 0;
        padding: 0 24px 24px
    }

    .ApprovalInfo_permission .ant-modal-footer button.ant-btn {
        padding: 0 20px;
        margin-left: 1em
    }

    .ApprovalInfo_permission .card {
        margin-bottom: 24px
    }

    .ApprovalInfo_permission .add-dep-btn {
        margin-left: 1em;
        color: #37f;
        border-color: rgba(51, 119, 255, .5)
    }

    .ApprovalInfo_permission .add-dep-btn > span {
        color: #37f
    }

    .ApprovalInfo_permission .btn-box {
        display: flex;
        flex-flow: row wrap;
        margin-left: 24px
    }

    .ApprovalInfo_permission .btn-box .tag {
        height: 28px;
        display: inline-flex;
        align-items: center;
        margin: 8px 8px 0 0
    }

    .ApprovalInfo_permission .btn-box .ant-tag {
        cursor: default
    }

    .ApprovalInfo_permission .btn-box .ant-tag .anticon-close svg {
        border-radius: 50%
    }

    .ApprovalInfo_permission .btn-box .ant-tag .anticon-close svg:hover {
        background-color: #77797c;
        color: #fff;
        -webkit-transition: .5s;
        transition: .5s
    }

    .ApprovalInfo_permission .btn-box .ant-btn {
        padding: 4px 12px;
        color: #37f;
        border-color: rgba(51, 119, 255, .5)
    }

    .ApprovalInfo_permission .btn-box .ant-btn span {
        color: #37f
    }

    .limit-input {
        position: relative
    }

    .limit-input.required:before {
        display: inline-block;
        margin-left: -10px;
        margin-top: 10px;
        color: #f5222d;
        font-size: 14px;
        font-family: SimSun, sans-serif;
        line-height: 1;
        content: "*";
        position: absolute
    }

    .external-data .external-data-extra-url {
        display: flex
    }

    .external-data .external-data-tip {
        min-width: 5em;
        text-align: center;
        color: #006aff;
        opacity: .5
    }

    .external-data .external-data-label {
        display: inline-block
    }

    .external-data .external-data-guide {
        color: #006aff
    }

    .external-data .ant-form-item {
        margin-bottom: 12px
    }

    .external-data-modal {
        max-height: 20em;
        overflow: auto
    }

    .base-form-item {
        position: relative;
        margin-bottom: 32px
    }

    .base-form-item-label {
        display: block;
        margin-bottom: 8px;
        color: #1f2329;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px
    }

    .base-form-item-label.base-form-item-label-required span {
        position: relative
    }

    .base-form-item-label.base-form-item-label-required span:after {
        content: "*";
        position: absolute;
        left: 100%;
        top: 1px;
        line-height: 20px;
        padding-left: 2px;
        color: #f54a45
    }

    .base-form-item-control-wrapper .ant-checkbox-wrapper:not(:last-of-type) {
        margin-left: 0;
        margin-right: 8px
    }

    .base-form-item-control-wrapper .ant-checkbox-wrapper + .ant-checkbox-wrapper {
        margin-left: 0
    }

    .base-form-item-error-msg {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        color: #f54a45;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px
    }

    .base-form-item-error .base-form-item-error-msg {
        display: block
    }

    .trip-group-title {
        color: #1f2329
    }

    .trip-group-text, .trip-group-title {
        margin-bottom: 8px;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px
    }

    .trip-group-text {
        color: #8f959e
    }

    .base-view {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        padding: 12px;
        height: 44px;
        background-color: #fff
    }

    .base-view-required .base-view-name span:after {
        content: "*";
        position: absolute;
        top: 2px;
        right: 0;
        padding-left: 2px;
        line-height: 20px;
        color: #f54a45
    }

    .base-view-title {
        flex-shrink: 1;
        flex-grow: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%
    }

    .base-view-has-right-arrow .base-view-title {
        padding-right: 10px
    }

    .base-view-name {
        position: relative;
        padding-right: 8px;
        min-height: 20px;
        color: #1f2329
    }

    .base-view-name, .base-view-placeholder {
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .base-view-placeholder {
        color: #8f959e
    }

    .base-view-right-arrow {
        position: absolute;
        right: 10px;
        margin-left: 4px;
        color: #8f959e
    }

    .base-textarea-view {
        position: relative;
        padding: 12px;
        background-color: #fff
    }

    .base-textarea-view-title {
        display: flex;
        justify-content: flex-start
    }

    .base-textarea-view-name {
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        min-height: 20px;
        color: #1f2329;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .base-textarea-view-star {
        color: #f54a45
    }

    .base-textarea-view-placeholder {
        min-height: 40px;
        color: #8f959e
    }

    .base-textarea-view-placeholder, .trip-group-view-add-detail-btn {
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px
    }

    .trip-group-view-add-detail-btn {
        position: relative;
        padding: 8px;
        color: #3370ff;
        text-align: center;
        background-color: #fff
    }

    .form-amount-unit .ant-select, .form-amount-unit .approval-select {
        display: block
    }

    .form-options-use-external-data {
        margin-bottom: 8px
    }

    .form-options-option {
        display: flex;
        justify-content: flex-start;
        margin-bottom: 8px
    }

    .form-options-option:last-of-type {
        margin-bottom: 0
    }

    .form-options-option-input {
        flex-grow: 1
    }

    .form-options-option-add {
        margin: 2px 2px 2px 16px
    }

    .form-options-option-add, .form-options-option-delete {
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        text-align: center;
        line-height: 24px;
        color: #d8d8d8;
        cursor: pointer
    }

    .form-options-option-delete {
        margin: 2px 2px 2px 8px
    }

    .form-options-help-link {
        color: #3370ff
    }

    .base-applicant-view {
        display: flex;
        flex-direction: column;
        position: relative;
        padding: 12px;
        height: 74px;
        background-color: #fff
    }

    .base-applicant-view-required .base-applicant-view-name span:after {
        content: "*";
        position: absolute;
        top: 2px;
        right: 0;
        padding-left: 2px;
        line-height: 20px;
        color: #f54a45
    }

    .base-applicant-view-row {
        flex-shrink: 1;
        flex-grow: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%
    }

    .base-applicant-view-row:not(:last-child) {
        margin-bottom: 5px
    }

    .base-applicant-view-name {
        position: relative;
        padding-right: 8px;
        min-height: 20px;
        color: #1f2329
    }

    .base-applicant-view-name, .base-applicant-view-placeholder {
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .base-applicant-view-placeholder {
        color: #8f959e
    }

    .base-applicant-view-applicant-select {
        height: 26px;
        width: 44px;
        border-radius: 13px;
        border: 1px solid #82a7fc;
        box-sizing: border-box;
        position: relative
    }

    .base-applicant-view-applicant-select:after, .base-applicant-view-applicant-select:before {
        content: "";
        position: absolute;
        height: 1px;
        width: 10px;
        background-color: #82a7fc;
        top: 50%;
        left: 50%;
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%)
    }

    .base-applicant-view-applicant-select:after {
        -webkit-transform: translateX(-50%) translateY(-50%) rotate(90deg);
        transform: translateX(-50%) translateY(-50%) rotate(90deg)
    }

    .base-applicant-view-applicant-select-readonly {
        height: 26px;
        width: 44px;
        border-radius: 13px;
        border: 1px solid #bbbfc4;
        box-sizing: border-box;
        position: relative
    }

    .base-applicant-view-applicant-select-readonly:after, .base-applicant-view-applicant-select-readonly:before {
        content: "";
        position: absolute;
        height: 1px;
        width: 10px;
        background-color: #bbbfc4;
        top: 50%;
        left: 50%;
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%)
    }

    .base-applicant-view-applicant-select-readonly:after {
        -webkit-transform: translateX(-50%) translateY(-50%) rotate(90deg);
        transform: translateX(-50%) translateY(-50%) rotate(90deg)
    }

    .form-options-v2-use-external-data {
        margin: 1em 0
    }

    .form-options-v2-option {
        display: flex;
        justify-content: flex-start;
        flex-flow: row wrap;
        margin-bottom: 8px
    }

    .form-options-v2-option:last-of-type {
        margin-bottom: 0
    }

    .form-options-v2-option-box {
        display: flex;
        justify-content: flex-start;
        flex: auto
    }

    .form-options-v2-option-input {
        flex-grow: 1
    }

    .form-options-v2-option-add {
        margin: 10px 0
    }

    .form-options-v2-option-add .ant-btn.ant-btn-link {
        padding: 0;
        margin-right: 2em;
        display: inline-flex;
        align-items: center
    }

    .form-options-v2-option-add i.icon-plus {
        margin-right: 4px
    }

    .form-options-v2-warning {
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #8f959e;
        margin: 1em 0
    }

    .form-options-v2-warning .icon-modal-warning {
        margin-right: 8px
    }

    .form-options-v2-mini-drag {
        cursor: move;
        font-size: 12px;
        color: #9ca2a9;
        display: inline-flex;
        align-items: center;
        width: 16px
    }

    .form-options-v2-option-delete {
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        text-align: center;
        line-height: 24px;
        color: #d8d8d8;
        cursor: pointer;
        color: #8f959e;
        margin: 2px 2px 2px 8px
    }

    .form-options-v2-option-error-msg {
        margin-bottom: 8px;
        margin-left: 16px;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #f54a45
    }

    .form-options-v2-help-link {
        color: #3370ff
    }

    .form-options-v2-batch {
        width: 100% !important;
        padding: 16px !important
    }

    .form-options-v2-batch .ant-modal-content {
        box-shadow: 2px 4px 12px rgba(0, 0, 0, .16);
        padding: 16px
    }

    .form-options-v2-batch .ant-modal-footer, .form-options-v2-batch .ant-modal-header {
        padding: 0;
        border-width: 0
    }

    .form-options-v2-batch .ant-modal-title {
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #1f2329
    }

    .form-options-v2-batch .ant-modal-body {
        padding: 12px 0
    }

    .form-options-v2-batch .ant-modal-close-x {
        font-size: 14px;
        width: 42px
    }

    .form-date-type-radio-radio-wrapper {
        margin-bottom: 8px
    }

    .form-date-type-radio-radio-wrapper:last-of-type {
        margin-bottom: 0
    }

    .form-switch .ant-switch-checked {
        background-color: #3370ff
    }

    .form-formula {
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        line-height: 22px;
        padding: 4px 11px;
        border-radius: 4px;
        border: 1px solid #d9d9d9;
        color: rgba(0, 0, 0, .65);
        word-break: break-all;
        cursor: pointer
    }

    .form-formula-formula-item-invalid {
        color: #f54a45
    }

    .base-form-item-error .form-formula {
        border-color: #f54a45
    }

    .form-other-item {
        display: inline-block;
        margin-right: 24px
    }

    .form-other-item-checkbox {
        padding: 4px
    }

    .form-other-item-label {
        display: inline-flex;
        align-items: center;
        margin-left: 4px;
        color: #646a73
    }

    .number-widget .number-widget-tip {
        margin-bottom: 32px;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #1f2329
    }

    .base-attachment-view {
        padding: 12px;
        background-color: #fff
    }

    .base-attachment-view-title {
        display: flex;
        justify-content: flex-start
    }

    .base-attachment-view-name {
        margin-bottom: 12px;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        min-height: 20px;
        color: #1f2329;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .base-attachment-view-star {
        color: #f54a45
    }

    .base-attachment-view-placeholder .base-attachment-view-select-btn {
        width: 48px;
        height: 48px;
        line-height: 48px;
        text-align: center;
        color: #8f959e;
        font-size: 16px;
        background-color: #f5f6f7
    }

    .base-input-select-type-item {
        margin-bottom: 8px;
        display: flex;
        align-items: center
    }

    .base-input-select-type-item:last-of-type {
        margin-bottom: 10px
    }

    .base-input-select-type-item-name {
        width: 136px;
        margin-right: 8px
    }

    .base-input-select-type-item-unit {
        width: 124px;
        margin-right: 8px
    }

    .base-input-select-type-item-add-icon {
        cursor: pointer
    }

    .base-select-item-wrapper {
        margin-bottom: 24px;
        display: flex;
        flex-direction: column
    }

    .base-select-item-title {
        color: #1f2329;
        margin-bottom: 10px
    }

    .out-group-editor-prompt {
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #8f959e
    }

    .out-group-editor-item-wrapper {
        margin-top: 26px;
        margin-bottom: 14px
    }

    .out-group-editor-add-type-wrapper {
        margin-bottom: 24px
    }

    .out-group-editor-add-type-btn {
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #3370ff;
        cursor: pointer
    }

    .out-group-editor-item-title {
        color: #1f2329;
        margin-bottom: 10px
    }

    .out-group-editor-item-label {
        margin-left: 4px;
        color: #646a73
    }

    .out-group-editor-item-checkbox {
        padding: 4px;
        margin-bottom: 24px
    }

    .out-group-editor-single-select {
        display: block
    }

    .out-group-editor-type-item-error {
        margin-bottom: 8px;
        color: #f54a45
    }

    .flow-editor {
        position: fixed;
        left: 0;
        top: 64px;
        right: 0;
        bottom: 0;
        z-index: 11;
        background-color: #f0f0f2
    }

    .flow-editor .root-node-wrap {
        display: flex;
        padding: 50px 0 0
    }

    .approval-editor-drawer {
        z-index: 1001
    }

    .approval-editor-drawer .approval-editor-content .approval-editor-form {
        padding: 28px 24px 0
    }

    .approval-editor-drawer .approval-editor-name-wrapper {
        min-height: 45px
    }

    .approval-editor-drawer .approval-editor-name-wrapper .approval-editor-name {
        font-size: 30px
    }

    .approval-editor-drawer .approval-editor-name-wrapper .icon {
        margin-left: 10px
    }

    .approval-editor-drawer .approval-editor-footer-wrapper {
        padding: 16px 24px
    }

    .MemberSearcher {
        position: relative;
        padding-top: 4px
    }

    .MemberSearcher_shower {
        display: flex;
        flex-wrap: wrap;
        line-height: 26px;
        overflow: hidden;
        height: 100%;
        padding: 6px 6px 0;
        border: 1px solid #d9d9d9;
        border-radius: 4px
    }

    .MemberSearcher_shower.has-error {
        border: 1px solid #ff5b4c
    }

    .error-msg {
        color: #f5222d
    }

    .MemberSearcher .MemberSearcher_shower .ant-input[type=text] {
        flex-grow: 1;
        flex-shrink: 1;
        width: 10px;
        height: 22px;
        margin-bottom: 6px;
        padding: 0;
        border: none
    }

    .MemberSearcher_shower .ant-input:focus {
        box-shadow: none
    }

    .MemberSearcher_name {
        flex-shrink: 0;
        position: relative;
        margin-right: 6px;
        margin-bottom: 6px;
        padding: 2px 24px 2px 8px;
        max-width: 100%;
        height: 22px;
        line-height: 18px;
        background-color: rgba(0, 206, 125, .1);
        border-radius: 4px;
        overflow: hidden
    }

    .MemberSearcher_delete {
        position: absolute;
        top: 0;
        right: 6px;
        font-size: 16px;
        cursor: pointer
    }

    .MemberSearcher_delete:hover {
        font-weight: 700
    }

    .MemberSearcher_suggestions {
        position: absolute;
        z-index: 1;
        top: calc(100% + 4px);
        width: 100%;
        max-height: 176px;
        overflow: auto;
        border-radius: 4px;
        padding-top: 8px;
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .16)
    }

    .MemberSearcher_suggestionItem {
        position: relative;
        padding: 7px 0 7px 48px;
        background-color: #fff;
        cursor: pointer
    }

    .MemberSearcher_suggestionItem:hover {
        background-color: #f5f5f5
    }

    .MemberSearcher_suggestionItemAvatar {
        position: absolute;
        top: 6px;
        left: 8px;
        width: 32px;
        height: 32px;
        border-radius: 16px;
        overflow: hidden;
        background-color: #f0f0f0
    }

    .MemberSearcher_suggestionItemAvatar img {
        display: block;
        width: 100%;
        height: 100%
    }

    .MemberSearcher_suggestionItemInfo {
        height: 30px;
        display: flex;
        flex-flow: column;
        justify-content: center
    }

    .MemberSearcher_suggestionItemName {
        margin-bottom: 2px;
        height: 14px;
        font-size: 14px;
        line-height: 14px;
        color: #000;
        opacity: .85
    }

    .MemberSearcher_suggestionItemMail {
        height: 14px;
        font-size: 12px;
        line-height: 14px;
        color: #9e9e9e;
        opacity: .85
    }

    .approver-level-tooltip-container .approver-level-tooltip-inner .icon {
        line-height: 16px
    }

    .approver-level-tooltip-overlay.ant-tooltip-placement-bottom .ant-tooltip-arrow, .approver-level-tooltip-overlay.ant-tooltip-placement-bottomLeft .ant-tooltip-arrow, .approver-level-tooltip-overlay.ant-tooltip-placement-bottomRight .ant-tooltip-arrow {
        border-bottom-color: #fff
    }

    .approver-level-tooltip-overlay.ant-tooltip-placement-top .ant-tooltip-arrow, .approver-level-tooltip-overlay.ant-tooltip-placement-topLeft .ant-tooltip-arrow, .approver-level-tooltip-overlay.ant-tooltip-placement-topRight .ant-tooltip-arrow {
        border-top-color: #fff
    }

    .item-content-editor .content-wrap .item-wrap {
        margin-top: 25px
    }

    .item-content-editor .content-wrap .item-wrap .item-content .CustomRadio_InitiatorSelect {
        flex-direction: column;
        align-items: flex-start
    }

    .item-content-editor .content-wrap .item-wrap .item-content .add-operator {
        color: #00a8ff
    }

    .item-content-editor .content-wrap .item-wrap .item-content .empty-approver .empty-approver-type {
        margin-right: 11px
    }

    .item-content-editor .content-wrap .item-wrap .item-content .empty-approver .empty-approver-type .ant-select {
        width: 100%
    }

    .item-content-editor .content-wrap .item-wrap .item-content .empty-approver .empty-approver-value {
        flex-shrink: 1;
        flex-grow: 1
    }

    .item-content-editor .content-wrap .item-wrap .item-content .empty-approver .empty-approver-value .ant-select {
        width: 100%
    }

    .item-content-editor .content-wrap .item-wrap .item-content .empty-approver .empty-approver-value .MemberSearcher {
        padding-top: 0
    }

    .form-field-privilege-warpper .form-field-privilege-table .form-field-privilege-tr .form-item-td {
        padding: 9px 0 9px 20px
    }

    .form-field-privilege-warpper .form-field-privilege-table .form-field-privilege-tr .form-item-name, .form-field-privilege-warpper .form-field-privilege-table .form-field-privilege-tr .readable, .form-field-privilege-warpper .form-field-privilege-table .form-field-privilege-tr .title-name, .form-field-privilege-warpper .form-field-privilege-table .form-field-privilege-tr .writable {
        width: 33%
    }

    .custom-id-form-item {
        display: flex;
        align-items: flex-start;
        margin-top: 18px
    }

    .custom-id-form-item.no-grid .ant-form-item-control-wrapper {
        flex-grow: 1
    }

    .approval-select .icon-dropdown.icon-dropdown {
        color: rgba(0, 0, 0, .25)
    }

    .applicant-selector .wrap {
        border: 1px solid #e4e5e7;
        border-radius: 5px;
        height: 440px;
        display: flex
    }

    .applicant-selector .box {
        width: 50%;
        padding: 1em;
        overflow: auto
    }

    .applicant-selector .left-box {
        border-right: 1px solid #e4e5e7
    }

    .applicant-selector .left-box li .ant-tree-node-content-wrapper.ant-tree-node-selected, .applicant-selector .left-box li .ant-tree-node-content-wrapper:hover {
        background-color: inherit
    }

    .applicant-selector .left-box li span.ant-tree-switcher-noop {
        background: transparent
    }

    .applicant-selector .ant-radio-group {
        width: 100%;
        display: flex
    }

    .applicant-selector .ant-radio-button-wrapper {
        text-align: center;
        flex: auto
    }

    .applicant-selector .ant-tabs-bar.ant-tabs-top-bar {
        display: none
    }

    .country-select {
        margin-bottom: 12px;
        height: 32px;
        line-height: 32px;
        width: 100%;
        border-radius: 4px;
        border: 1px solid #d9d9d9;
        display: inline-block;
        padding: 0 10px;
        position: relative
    }

    .country-select .ant-tabs-tab {
        color: #212121;
        font-weight: 500;
        font-size: 14px
    }

    .country-select .ant-tabs-nav .ant-tabs-tab:hover, .country-select .ant-tabs-tab-active {
        color: #4c84f7 !important
    }

    .country-select:hover {
        border: 1px solid #1890ff
    }

    .country-select .country-select__input {
        display: flex
    }

    .country-select .country-select__input .country-select__value {
        flex: 1 1;
        color: #141f33
    }

    .country-select .common-placeholder {
        color: #cccaca
    }

    .country-select .country-select__opt {
        box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .08);
        height: 300px;
        width: 120%;
        padding: 0 20px;
        background-color: #fff;
        border: 1px solid #e6e6e6;
        border-radius: 8px;
        z-index: 999;
        position: absolute;
        left: 0;
        overflow: scroll
    }

    .country-select .country-select__opt--top {
        top: -308px
    }

    .country-select .country-select__opt--bottom {
        top: 40px
    }

    .country-select .country-select__opt .country-tag {
        display: inline-block;
        border-radius: 2px;
        color: #212121;
        cursor: pointer;
        margin: 6px;
        padding: 4px 12px;
        border: 1px solid #ededf0
    }

    .country-select .country-select__opt .country-tag--selected {
        border: 1px solid #4575f6;
        color: #4575f6
    }

    .province-select {
        margin-bottom: 14px;
        height: 32px;
        line-height: 32px;
        width: 100%;
        border-radius: 4px;
        border: 1px solid #d9d9d9;
        display: inline-block;
        padding: 0 10px;
        position: relative
    }

    .province-select .common-placeholder {
        color: #cccaca
    }

    .province-select--disabled {
        cursor: not-allowed;
        background-color: rgba(0, 0, 0, .05)
    }

    .province-select:hover {
        border: 1px solid #4c84f7
    }

    .province-select--disabled:hover {
        border: 1px solid #d9d9d9
    }

    .province-select__input {
        display: flex
    }

    .province-select__input .province-select__value {
        flex: 1 1;
        color: #141f33
    }

    .province-select__opt {
        box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .08);
        height: 300px;
        overflow: scroll;
        width: 80%;
        padding: 0 20px;
        background-color: #fff;
        border: 1px solid #e6e6e6;
        border-radius: 8px;
        z-index: 999;
        position: absolute;
        left: 0
    }

    .province-select__opt--top {
        top: -308px
    }

    .province-select__opt--bottom {
        top: 40px
    }

    .province-select__opt .wrap-list .wrap-item {
        padding-left: 12px;
        display: flex
    }

    .province-select__opt .wrap-list .wrap-item .main-list__index {
        margin-bottom: 12px;
        width: 18px;
        color: #9e9e9e
    }

    .province-select__opt .wrap-list .wrap-item .main-list {
        flex: 1 1
    }

    .province-select__opt .wrap-list .wrap-item .main-list .main-item {
        padding-left: 10px;
        margin-bottom: 12px;
        color: #212121
    }

    .province-select__opt .wrap-list .wrap-item .main-list .main-item--selected, .province-select__opt .wrap-list .wrap-item .main-list .main-item:hover {
        color: #4c84f7
    }

    .province-select .ant-tabs-tab {
        color: #212121;
        font-weight: 500;
        font-size: 14px
    }

    .province-select .ant-tabs-nav .ant-tabs-tab:hover, .province-select .ant-tabs-tab-active {
        color: #4c84f7 !important
    }

    .country-group .ant-input, .country-group .has-error {
        border-color: #d9d9d9 !important
    }

    .condition-form-item .applicant-btn, .condition-form-item .value-input {
        height: 36px
    }

    .condition-form-item .applicant-btn .applicant-btn-content {
        text-overflow: ellipsis
    }

    .condition-form-item .condition-address-value {
        height: 36px;
        line-height: 36px
    }

    .condition-form-item .ant-select-selection--multiple {
        min-height: 36px
    }

    .ApprovalFlow {
        margin-left: 78px;
        margin-top: 30px
    }

    .ApprovalFlow .approvalflow-form .ant-form-item .ant-form-item-label {
        text-align: left
    }

    .ApprovalFlow_defaultApprovers, .ApprovalFlow_defaultCC {
        display: flex;
        flex-wrap: wrap
    }

    .ApprovalFlow_add {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background-color: #f4f5f6;
        cursor: pointer
    }

    .ApprovalFlow_add .icon-add {
        font-size: 14px;
        color: #d8d8d8
    }

    .ApprovalFlow_nextStep {
        margin: 4px 30px 4px 0;
        color: #f4f5f6
    }

    .ApprovalFlow_nextStep i {
        width: 100%;
        height: 100%;
        font-size: 10px
    }

    .approval-flow-wrap {
        height: 100%;
        display: none;
        position: relative
    }

    .approval-flow-wrap.visible {
        display: block
    }

    .approval-flow-tabs {
        height: 100%;
        display: flex;
        flex-direction: column
    }

    .approval-flow-tabs .ant-tabs-bar {
        margin-left: 62px;
        margin-bottom: 0
    }

    .approval-flow-tabs .ant-tabs-content {
        flex: 1 1
    }

    .approval-flow-tabs .ant-tabs-content .ant-tabs-tabpane {
        height: 100%
    }

    .item-editor-tabs .ant-tabs-bar {
        margin: 0
    }

    .item-editor-tabs .ant-tabs-nav {
        width: 100%
    }

    .item-editor-tabs .ant-tabs-nav > div:first-child {
        display: flex;
        width: 100%
    }

    .item-editor-tabs .ant-tabs-nav > div:first-child .ant-tabs-tab {
        flex-grow: 1;
        text-align: center
    }

    .FlowEditorSwitch {
        display: flex;
        width: 100%;
        padding: 0 78px 6px;
        align-items: center;
        border-bottom: 1px solid #e9eaf2
    }

    .FlowEditorSwitch_title {
        font-size: 16px;
        color: #18263c;
        margin-right: 20px
    }

    .FlowEditorSwitch_btn {
        display: flex;
        align-items: center;
        font-size: 13px;
        color: #006aff;
        border: none;
        outline: none;
        cursor: pointer
    }

    .FlowEditorSwitch_btn img {
        width: 13px;
        margin-right: 6px
    }

    .FlowEditorPanel_container {
        display: none
    }

    .FlowEditorPanel_container_active {
        display: block
    }

    .condition-expression-editor {
        display: flex
    }

    .condition-expression-editor .condition-expression-editor-comparison-sign, .condition-expression-editor .condition-expression-editor-condition-name {
        margin-right: 8px;
        width: 118px
    }

    .condition-expression-editor .condition-expression-editor-standard-value {
        width: 158px
    }

    .condition-expression-editor .condition-expression-editor-standard-value-with-unit {
        display: flex;
        justify-content: flex-start;
        align-items: center
    }

    .condition-expression-editor .condition-expression-editor-standard-value-unit {
        flex-shrink: 0;
        padding-left: 4px
    }

    .condition-expression-editor .condition-expression-editor-comparison-sign, .condition-expression-editor .condition-expression-editor-condition-name, .condition-expression-editor .condition-expression-editor-standard-value {
        height: 36px
    }

    .condition-expression-editor .condition-expression-editor-comparison-sign .ant-select, .condition-expression-editor .condition-expression-editor-condition-name .ant-select, .condition-expression-editor .condition-expression-editor-standard-value .ant-select {
        width: 100%;
        height: 36px
    }

    .condition-expression-editor .condition-expression-editor-comparison-sign .ant-input, .condition-expression-editor .condition-expression-editor-condition-name .ant-input, .condition-expression-editor .condition-expression-editor-standard-value .ant-input {
        width: 100%
    }

    .condition-expression-editor .condition-expression-editor-comparison-sign .ant-select-selection--multiple .ant-select-selection__rendered > ul > li, .condition-expression-editor .condition-expression-editor-condition-name .ant-select-selection--multiple .ant-select-selection__rendered > ul > li, .condition-expression-editor .condition-expression-editor-standard-value .ant-select-selection--multiple .ant-select-selection__rendered > ul > li {
        height: 28px
    }

    .condition-expression-editor .condition-expression-editor-comparison-sign .ant-select-search.ant-select-search--inline, .condition-expression-editor .condition-expression-editor-condition-name .ant-select-search.ant-select-search--inline, .condition-expression-editor .condition-expression-editor-standard-value .ant-select-search.ant-select-search--inline {
        width: 0
    }

    .condition-expression-editor .condition-expression-editor-comparison-sign .ant-select-selection.ant-select-selection--multiple, .condition-expression-editor .condition-expression-editor-condition-name .ant-select-selection.ant-select-selection--multiple, .condition-expression-editor .condition-expression-editor-standard-value .ant-select-selection.ant-select-selection--multiple {
        height: 100%;
        overflow: hidden
    }

    .condition-expression-editor .condition-expression-editor-standard-value.condition-expression-editor-standard-value-leave-interval-unit {
        display: flex;
        justify-content: space-between
    }

    .condition-expression-editor .condition-expression-editor-standard-value .condition-expression-editor-standard-value-leave-interval {
        margin-right: 8px;
        width: 50%
    }

    .condition-expression-editor .condition-expression-editor-standard-value .condition-expression-editor-standard-value-leave-unit {
        width: 50%
    }

    .simple-condition-editor .simple-condition-editor-condition-group {
        border: 1px solid #e9eaf2;
        border-radius: 4px
    }

    .simple-condition-editor .simple-condition-editor-condition-group .simple-condition-editor-condition-group-header {
        display: flex;
        justify-content: space-between;
        padding: 12px 14px;
        background-color: #f4f5f6
    }

    .simple-condition-editor .simple-condition-editor-condition-group .simple-condition-editor-condition-group-title {
        font-size: 14px;
        line-height: 20px;
        color: #252834
    }

    .simple-condition-editor .simple-condition-editor-condition-group .simple-condition-editor-condition-group-delete-button {
        flex-grow: 0;
        flex-shrink: 0
    }

    .simple-condition-editor .simple-condition-editor-condition-group .simple-condition-editor-condition-group-body {
        padding: 16px
    }

    .simple-condition-editor .simple-condition-editor-between-group {
        margin: 16px 0;
        font-size: 14px;
        line-height: 20px;
        color: #252834
    }

    .simple-condition-editor .simple-condition-editor-add-expression {
        font-size: 14px;
        line-height: 24px
    }

    .simple-condition-editor .simple-condition-editor-add-expression a {
        color: #006aff
    }

    .simple-condition-editor .simple-condition-editor-expression {
        display: flex;
        margin-bottom: 8px
    }

    .simple-condition-editor .simple-condition-editor-expression:nth-child(-1) {
        margin-bottom: 14px
    }

    .simple-condition-editor .simple-condition-editor-expression-prefix {
        margin-right: 8px;
        font-size: 14px;
        line-height: 36px;
        color: #b7bec7
    }

    .simple-condition-editor .simple-condition-editor-expression-editor-wrapper {
        display: flex
    }

    .simple-condition-editor .simple-condition-editor-expression-delete-button {
        margin-left: 12px;
        cursor: pointer
    }

    .simple-condition-editor .simple-condition-editor-condition-group + .simple-condition-editor-add-condition-group {
        margin-top: 16px
    }

    .simple-condition-editor .simple-condition-editor-add-condition-group {
        padding: 12px;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        font-size: 14px;
        line-height: 24px;
        text-align: center;
        color: #006aff;
        cursor: pointer
    }

    .simple-condition-editor .simple-condition-editor-expression-tip {
        margin-bottom: 8px;
        color: #a1a5ad;
        font-size: 14px
    }

    .simple-condition-editor .simple-condition-editor-expression-tip .simple-condition-editor-expression-tip-icon {
        display: inline-block;
        height: 16px;
        width: 16px;
        margin-right: 4px;
        line-height: 16px;
        font-size: 12px;
        border: 1px solid #a1a5ad;
        border-radius: 50%;
        color: #a1a5ad;
        text-align: center
    }

    .simple-condition-editor .simple-condition-editor-expression-tip .simple-condition-editor-expression-tip-text {
        margin: 0 0 8px -12px;
        padding: 0 0 0 12px;
        font-size: 14px;
        cursor: pointer
    }

    .simple-condition-editor-expression-tip-overlay-wrapper, .simple-condition-editor-expression-tip-overlay-wrapper .ant-tooltip-inner {
        background-color: #fff
    }

    .simple-condition-editor-expression-tip-overlay-wrapper.ant-tooltip {
        width: 400px;
        max-width: none
    }

    .simple-condition-editor-expression-tip-overlay-wrapper.ant-tooltip-placement-top .ant-tooltip-arrow, .simple-condition-editor-expression-tip-overlay-wrapper.ant-tooltip-placement-topLeft .ant-tooltip-arrow, .simple-condition-editor-expression-tip-overlay-wrapper.ant-tooltip-placement-topRight .ant-tooltip-arrow {
        border-top-color: #fff
    }

    .simple-condition-editor-expression-tip-overlay-wrapper .simple-condition-editor-expression-tip-overlay .simple-condition-editor-expression-tip-overlay-title {
        margin-bottom: 24px;
        font-size: 16px;
        line-height: 20px;
        color: #1f2329
    }

    .simple-condition-editor-expression-tip-overlay-wrapper .simple-condition-editor-expression-tip-overlay .simple-condition-editor-expression-tip-overlay-sub-title {
        margin-bottom: 12px;
        font-size: 14px;
        line-height: 20px;
        color: #9ca2a9
    }

    .simple-condition-editor-expression-tip-overlay-wrapper .simple-condition-editor-expression-tip-overlay .simple-condition-editor-expression-tip-overlay-image, .simple-condition-editor-expression-tip-overlay-wrapper .simple-condition-editor-expression-tip-overlay .simple-condition-editor-expression-tip-overlay-image img {
        width: 100%
    }

    .work-group-editor-title {
        padding-top: 24px;
        margin-bottom: 8px;
        line-height: 20px;
        border-top: 1px solid #e4e5e7
    }

    .work-group-editor-switch-wraper, .work-group-editor-title {
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        color: #1f2329
    }

    .work-group-editor-switch-wraper {
        margin: 22px 0;
        line-height: 22px;
        line-height: 20px
    }

    .work-group-editor-switch-wraper button {
        margin-left: 8px
    }

    .work-group-editor-link {
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #3370ff
    }

    .work-group-editor-prompt, .work-group-editor-text {
        margin-bottom: 8px;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #8f959e
    }

    .work-group-editor-type-item {
        margin-bottom: 24px
    }

    .work-group-editor-type-item:last-of-type {
        margin-bottom: 8px
    }

    .work-group-editor-type-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px
    }

    .work-group-editor-type-title {
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #8f959e
    }

    .work-group-editor-type-delete-btn {
        color: #8f959e;
        cursor: pointer
    }

    .work-group-editor-type-name {
        margin-bottom: 8px
    }

    .work-group-editor-type-name-error {
        margin-bottom: 8px;
        color: #f54a45
    }

    .work-group-editor-type-leave-wrapper {
        display: flex;
        justify-content: flex-start;
        align-items: center
    }

    .work-group-editor-type-correlation-key {
        flex-grow: 0;
        flex-shrink: 0;
        margin-right: 8px;
        color: #8f959e
    }

    .work-group-editor-type-leave {
        flex-grow: 1
    }

    .work-group-editor-type-leave .ant-select, .work-group-editor-type-leave .approval-select {
        display: block
    }

    .work-group-editor-add-type-wrapper {
        margin-bottom: 24px
    }

    .work-group-editor-add-type-btn {
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #3370ff;
        cursor: pointer
    }

    .i18n-editor {
        position: absolute;
        top: 2px;
        left: 60px;
        right: 60px;
        width: calc(100% - 120px);
        background: #fff;
        z-index: 10;
        min-height: 300px
    }

    .i18n-editor .i18n-editor-back {
        padding: 18px 0;
        border-bottom: 1px solid #e4e5e7;
        cursor: pointer
    }

    .i18n-editor .ant-breadcrumb {
        margin-top: 20px
    }

    .i18n-editor .ant-breadcrumb .ant-breadcrumb-link {
        color: #252834
    }

    .i18n-editor .ant-breadcrumb .ant-breadcrumb-link a {
        color: #9e9e9e
    }

    .i18n-editor .title {
        margin-top: 30px;
        font-size: 20px;
        font-weight: 500;
        line-height: 28px;
        color: #18263c
    }

    .i18n-editor .btns {
        height: 0;
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px)
    }

    .i18n-editor button.ant-btn {
        float: right;
        height: 32px;
        border-radius: 2px;
        background-color: #fff;
        margin-left: 12px;
        font-size: 14px;
        color: #252834;
        border: 1px solid #d8d8d8;
        min-width: 84px;
        outline: none;
        padding: 0
    }

    .i18n-editor button.ant-btn.save {
        color: #fff;
        background-color: #006aff;
        border: none
    }

    .i18n-editor .default-lng {
        margin-top: 20px;
        height: 32px
    }

    .i18n-editor .default-lng .label {
        margin-right: 12px
    }

    .i18n-editor .cell-tip {
        overflow-wrap: break-word;
        word-break: break-all;
        max-width: 100%;
        line-height: 40px;
        min-height: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
        display: -webkit-inline-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        white-space: normal
    }

    .i18n-editor .cell-tip.cell-textarea {
        line-height: 24px;
        min-height: 72px
    }

    .i18n-editor .approval-input {
        width: 90%;
        border-radius: 3px
    }

    .i18n-editor .i18n-table {
        margin-top: 30px
    }

    .i18n-editor .i18n-table .ant-table {
        border-radius: 4px
    }

    .i18n-editor .i18n-table .ant-table table {
        table-layout: fixed
    }

    .i18n-editor .i18n-table .ant-table .ant-table-thead > tr > th {
        padding: 0 0 0 12px;
        height: 48px;
        font-size: 14px;
        font-weight: 400;
        line-height: 48px;
        color: #60758a;
        border: none;
        background-color: #f5f6f7
    }

    .i18n-editor .i18n-table .ant-table .ant-table-tbody > tr > td {
        padding: 10px;
        font-size: 14px;
        font-weight: 400;
        color: #18263c;
        border: none;
        background-color: #fff
    }

    .i18n-editor .i18n-table .ant-table .ant-table-tbody > tr > td:first-child {
        padding-left: 30px;
        color: #006aff
    }

    .i18n-editor .i18n-table .ant-table .ant-table-tbody > tr > td:nth-child(n+2) {
        border-bottom: 1px dashed #dee0e3
    }

    .i18n-editor .i18n-table .ant-table .ant-table-tbody > tr:hover > td {
        background-color: #fff
    }

    .i18n-editor .i18n-table .ant-table .ant-table-tbody > tr.end > td {
        border-bottom: 1px solid #dee0e3
    }

    .i18n-editor .ant-form-item {
        margin-bottom: 0
    }

    .DropContainer:not(:last-of-type) {
        margin-bottom: 16px
    }

    .DraggableApprovalGroup {
        border: 1px dashed transparent;
        border-radius: 6px
    }

    .DraggableApprovalGroup-active {
        border-color: #d8d8d8
    }

    .DraggableApprovalGroup-draggable {
        cursor: move
    }

    .ApprovalGroup {
        border-radius: 4px;
        box-shadow: 0 0 3px 1px #eee;
        background-color: #fff;
        font-family: PingFangSC
    }

    .ApprovalGroup_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 54px;
        padding: 0 20px 0 12px;
        font-size: 16px;
        line-height: 24px;
        color: #252834;
        background-color: rgba(244, 245, 246, .5)
    }

    .ApprovalGroup_headerTitle {
        position: relative
    }

    .ApprovalGroup_headerTitle .ant-input-group-wrapper {
        width: 336px
    }

    .ApprovalGroup_headerTitle .ApprovalGroup_nameInput {
        border-color: transparent
    }

    .ApprovalGroup_headerTitle .ApprovalGroup_nameInput .ant-input {
        font-size: 16px;
        border-color: transparent;
        background-color: initial;
        font-family: PingFangSC-Medium
    }

    .ApprovalGroup_headerTitle .ApprovalGroup_nameInput .ant-input:focus {
        background-color: #fff;
        outline: none;
        box-shadow: none
    }

    .ApprovalGroup_headerTitle.ApprovalGroup_headerTitle-isFocus .ApprovalGroup_nameInput .ant-input, .ApprovalGroup_headerTitle:hover .ApprovalGroup_nameInput .ant-input {
        border-color: #d9d9d9 transparent #d9d9d9 #d9d9d9
    }

    .ApprovalGroup_headerTitle .ant-input-group-addon {
        opacity: 0;
        border-color: transparent;
        background-color: #f4f5f6
    }

    .ApprovalGroup_headerTitle.ApprovalGroup_headerTitle-isFocus .ant-input-group-addon, .ApprovalGroup_headerTitle:hover .ant-input-group-addon {
        opacity: 1;
        border-color: #d9d9d9
    }

    .ApprovalGroup_headerTitle .ApprovalGroup_nameInputAddon {
        color: #1f2329
    }

    .ApprovalGroup_headerTitle .ApprovalGroup_nameInputAddon-valid {
        color: #34c724
    }

    .ApprovalGroup_headerTitle .ApprovalGroup_nameInputAddon-invalid, .ApprovalGroup_headerTitleTips .ant-tooltip-inner {
        color: #f54a45
    }

    .ApprovalGroup_headerTitleTips .ant-tooltip-arrow {
        border-right-color: #fff
    }

    .ApprovalGroup_headerTitleTips .ant-tooltip-inner {
        background-color: #fff
    }

    .ApprovalGroup_deleteButton {
        color: #1f2329;
        cursor: pointer
    }

    .ApprovalGroup_deleteButton.disabled {
        opacity: .5
    }

    .ApprovalGroup_deleteButton:hover {
        color: #f54a45
    }

    .ApprovalGroup_deleteButton:hover.disabled {
        color: #1f2329;
        opacity: .5
    }

    .ApprovalGroup_item, .ApprovalGroup_list {
        -webkit-transition: all .5s ease;
        transition: all .5s ease
    }

    .ApprovalGroup_item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 20px
    }

    .ApprovalGroup_item:not(.ApprovalGroup_item-disabled):hover {
        background-color: #eff0f1
    }

    .ApprovalGroup_item-disabled .ApprovalGroup_itemIcon, .ApprovalGroup_item-disabled .ApprovalGroup_itemSeeable {
        opacity: .5
    }

    .ApprovalGroup_item-disabled .ApprovalGroup_itemName {
        color: #bbbfc4
    }

    .ApprovalGroup_item-hidden {
        display: none
    }

    .ApprovalGroup_itemIcon {
        flex-shrink: 0;
        margin-right: 8px;
        height: 42px;
        width: 42px;
        border-radius: 50%;
        overflow: hidden;
        background-color: #ccc
    }

    .ApprovalGroup_itemIcon img {
        width: 100%;
        height: 100%
    }

    .ApprovalGroup_itemLeft {
        width: 420px;
        flex-shrink: 0
    }

    .ApprovalGroup_itemNameWrapper {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 5px
    }

    .ApprovalGroup_itemName {
        max-width: 280px;
        font-size: 14px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        line-height: 20px;
        color: #1f2329;
        font-weight: 500
    }

    .ApprovalGroup_itemTag {
        color: #f76964;
        background-color: #fef1f1
    }

    .ApprovalGroup_itemDefault, .ApprovalGroup_itemTag {
        text-align: center;
        font-size: 12px;
        border-radius: 10px;
        padding: 1px 8px;
        margin-left: 6px
    }

    .ApprovalGroup_itemDefault {
        color: #646a73;
        background-color: #eff0f1
    }

    .ApprovalGroup_itemIntro {
        width: 420px;
        line-height: 17px;
        color: #8f959e
    }

    .ApprovalGroup_itemIntro, .ApprovalGroup_itemSeeable {
        font-size: 14px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap
    }

    .ApprovalGroup_itemSeeable {
        flex-grow: 1;
        padding-left: 10px;
        padding-right: 20px;
        color: #1f2329
    }

    .ApprovalGroup_itemOperations {
        flex-shrink: 0;
        display: flex
    }

    .ApprovalGroup_itemOperation {
        margin-left: 10px
    }

    .ApprovalGroup_itemOperation:first-child {
        margin-left: 0
    }

    .ApprovalGroup_itemCopy {
        color: #1f2329;
        cursor: pointer
    }

    .ApprovalGroup_itemCopy:hover {
        color: #3370ff
    }

    .ApprovalGroup_itemEdit {
        color: #1f2329;
        cursor: pointer
    }

    .ApprovalGroup_itemEdit:hover {
        color: #3370ff
    }

    .ApprovalGroup_itemEditI18n {
        color: #1f2329;
        cursor: pointer
    }

    .ApprovalGroup_itemEditI18n:hover {
        color: #3370ff
    }

    .ApprovalGroup_itemDisable {
        color: #1f2329;
        cursor: pointer
    }

    .ApprovalGroup_itemDisable:hover {
        color: #f54a45
    }

    .ApprovalGroup_itemEnable {
        color: #34c724;
        cursor: pointer
    }

    .ApprovalGroup_itemDelete {
        color: #1f2329
    }

    .ApprovalGroup_itemDelete:hover {
        color: #f54a45;
        cursor: pointer
    }

    .ApprovalGroup_itemMove {
        color: #d8d8d8;
        cursor: move
    }

    .ApprovalGroup_item-disabled .ApprovalGroup_itemMove {
        cursor: not-allowed
    }

    .ApprovalGroup_item-icon-disabled, .ApprovalGroup_item-icon-disabled:hover {
        cursor: not-allowed;
        color: #c1c3c6
    }

    .ApprovalGroup_nameOperations {
        display: flex
    }

    .ApprovalGroup_nameOperations .ApprovalGroup_deleteButton, .ApprovalGroup_nameOperations .ApprovalGroup_itemEditI18n {
        margin-left: 10px
    }

    .ApprovalGroup_nameOperations .ApprovalGroup_deleteButton.disabled, .ApprovalGroup_nameOperations .ApprovalGroup_itemEditI18n.disabled {
        opacity: .5;
        cursor: not-allowed
    }

    .TemplateList .ant-modal-header {
        padding-top: 30px;
        padding-left: 30px;
        padding-right: 30px;
        border-bottom: none
    }

    .TemplateList .ant-modal-header .ant-modal-title {
        font-family: PingFangSC-Semibold
    }

    .TemplateList .ant-modal-body {
        padding-top: 14px;
        padding-left: 30px;
        padding-right: 30px
    }

    .TemplateList .ant-modal-footer {
        padding-bottom: 30px;
        padding-left: 30px;
        padding-right: 30px;
        border-top: none
    }

    .TemplateList_operations {
        border-bottom: 1px solid #d8d8d8;
        padding-bottom: 12px
    }

    .TemplateList_addCustomTemplate {
        display: inline;
        padding: 0;
        font-size: 14px;
        color: #00a8ff;
        background-color: initial;
        border: none;
        cursor: pointer;
        font-family: PingFangSC-Regular
    }

    .TemplateList_addCustomTemplate:focus {
        outline: none
    }

    .TemplateList_addCustomTemplate:active {
        font-weight: 700
    }

    .TemplateList_recommandTitle {
        padding: 30px 0 20px;
        font-size: 14px;
        color: #9e9e9e
    }

    .TemplateList_list {
        max-height: 300px;
        overflow-y: auto
    }

    @media (max-height: 600px) {
        .TemplateList_list {
            max-height: 200px
        }
    }

    .TemplateList_group {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px
    }

    .TemplateList_item {
        flex-grow: 0;
        width: 154px;
        height: 58px;
        line-height: 58px;
        border: 1px solid #f4f5f6;
        font-size: 16px;
        text-align: center;
        color: #252834;
        background-color: #f4f5f6;
        border-radius: 4px;
        cursor: pointer;
        font-family: PingFangSC-Regular
    }

    .TemplateList_emptyItem {
        width: 154px
    }

    .TemplateList_group:last-child {
        margin-bottom: 0
    }

    .TemplateList_item-selected, .TemplateList_item:hover {
        background-color: rgba(0, 168, 255, .1)
    }

    .TemplateList_item-selected {
        border-color: #00a8ff
    }

    .ApprovalList {
        width: 100%;
        max-width: 1000px
    }

    .ApprovalList_breadcrumb {
        margin-bottom: 20px
    }

    .ApprovalList_breadcrumb .ant-breadcrumb-link {
        color: #252834
    }

    .ApprovalList_breadcrumb .ant-breadcrumb-link a {
        color: #9e9e9e
    }

    .ApprovalList_operations {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        flex-shrink: 0
    }

    .ApprovalList_finishGroupSortButton.ant-btn {
        color: #3370ff;
        font-size: 14px;
        line-height: 24px;
        border-color: #3370ff
    }

    .ApprovalList_finishGroupSortButton .icon-checked {
        color: #3370ff;
        margin-right: 6px
    }

    .ApprovalList_operations .ant-btn {
        border-radius: 15px
    }

    .ApprovalList_operations .ant-btn:focus, .ApprovalList_operations .ant-btn:hover {
        color: #3370ff;
        border-color: #3370ff
    }

    .ApprovalList_cancelButton:focus {
        color: rgba(0, 0, 0, .65);
        border-color: #d9d9d9
    }

    .ApprovalList_groups {
        margin-bottom: 50px
    }

    .ApprovalList_noGroups {
        display: flex;
        justify-content: center;
        padding: 100px 0
    }

    .ApprovalList_confirmModal .ant-modal-header {
        border: none;
        padding: 30px 40px
    }

    .ApprovalList_confirmModal .ant-modal-body {
        padding: 0 40px
    }

    .ApprovalList_confirmModal .ant-modal-footer {
        border: none;
        padding: 30px 40px
    }

    .ApprovalList_confirmModal .ant-modal-title {
        font-size: 16px;
        color: #212121;
        line-height: 21px
    }

    .ApprovalList_confirmModalContent {
        font-size: 14px;
        color: #000;
        line-height: 22px;
        opacity: .85
    }

    .ApprovalList_CopyDialog .ant-modal-body, .ApprovalList_CopyDialog .ant-modal-footer, .ApprovalList_CopyDialog .ant-modal-header {
        padding-bottom: 28px
    }

    .ApprovalList_CopyDialog .ant-modal-header {
        padding-top: 28px;
        border-bottom: none
    }

    .ApprovalList_CopyDialog .ant-modal-body {
        padding-top: 0
    }

    .ApprovalList_CopyDialog .ant-modal-footer {
        border-top: none;
        padding-top: 0;
        padding-right: 28px
    }

    .ApprovalList_CopyDialog .ant-modal-title {
        font-weight: 600;
        line-height: 1
    }

    .ApprovalList_CopyDialog .ant-btn {
        padding: 0 36px
    }

    .ApprovalList_CopyDialog .ant-btn.ant-btn-primary {
        background-color: #3370ff
    }

    .ApprovalList_CopyDialog .ant-modal-footer button + button {
        margin-left: 16px
    }

    .ApprovalList_CopyDialogInput {
        display: flex;
        flex-direction: column
    }

    .ApprovalList_CopyDialogInput div {
        margin-bottom: 4px;
        line-height: 1
    }

    .create-approval-dialog {
        max-height: 620px
    }

    .create-approval-dialog .ant-modal-header {
        padding: 24px 24px 0;
        border-bottom: none
    }

    .create-approval-dialog .ant-modal-title {
        font-size: 24px;
        font-weight: 500;
        color: #1f2329;
        line-height: 36px
    }

    .create-approval-dialog .ant-btn-primary {
        padding: 0 24px
    }

    .create-approval-dialog .create-approval-btn-group, .create-approval-dialog .create-approval-btn-group .btn-link {
        display: flex;
        align-items: center
    }

    .create-approval-dialog .create-approval-btn-group .btn-link i[class^=iconfont] {
        margin: 0 6px 0 0
    }

    .create-approval-dialog .tpl-list-container {
        margin: 24px 0 0
    }

    .create-approval-dialog .tpl-list-container .tpl-list-header {
        margin: 0 0 8px;
        color: #8f959e;
        font-size: 14px
    }

    .create-approval-dialog .tpl-list-container .tpl-list {
        max-height: 500px
    }

    .create-approval-dialog .tpl-list-container .tpl-list-content {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap
    }

    .create-approval-dialog .tpl-list-container .tpl-container {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        width: 270px;
        height: 58px;
        padding: 12px;
        margin: 0 0 12px;
        box-sizing: border-box;
        background: #f8f9fa;
        border-radius: 4px
    }

    .create-approval-dialog .tpl-list-container .tpl-icon {
        width: 32px;
        height: 32px;
        flex-grow: 0;
        flex-shrink: 0;
        border-radius: 50%
    }

    .create-approval-dialog .tpl-list-container .tpl-info {
        flex-grow: 1;
        padding: 0 0 0 12px;
        box-sizing: border-box;
        overflow: hidden
    }

    .create-approval-dialog .tpl-list-container .tpl-name {
        color: #1f2329;
        font-size: 14px
    }

    .create-approval-dialog .tpl-list-container .tpl-desc {
        color: #8f959e;
        font-size: 12px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }

    .create-approval-dialog .scrollbar-container {
        max-height: 420px
    }

    .on-boarding-carousel-modal .ant-modal-body {
        padding: 0
    }

    .on-boarding-carousel-modal .ant-modal-content {
        border-radius: 12px;
        overflow: hidden
    }

    .on-boarding-carousel .on-boarding-carousel-skip {
        position: absolute;
        top: 24px;
        right: 32px;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #eff0f1;
        z-index: 1;
        cursor: pointer
    }

    .on-boarding-carousel .on-boarding-carousel-next-btn, .on-boarding-carousel .on-boarding-carousel-pre-btn {
        position: absolute;
        top: 260px;
        z-index: 1;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        box-shadow: 0 4px 8px -2px rgba(31, 35, 41, .1);
        background-color: #fff
    }

    .on-boarding-carousel .on-boarding-carousel-pre-btn {
        left: 20px
    }

    .on-boarding-carousel .on-boarding-carousel-next-btn {
        right: 20px
    }

    .on-boarding-carousel .on-boarding-carousel-next-btn .icon-arrow, .on-boarding-carousel .on-boarding-carousel-pre-btn .icon-arrow {
        display: block;
        font-size: 24px;
        line-height: 42px;
        text-align: center;
        cursor: pointer
    }

    .on-boarding-carousel .on-boarding-carousel-next-btn .icon-arrow:before, .on-boarding-carousel .on-boarding-carousel-pre-btn .icon-arrow:before {
        display: block
    }

    .on-boarding-carousel .on-boarding-carousel-next-btn .icon-arrow:hover, .on-boarding-carousel .on-boarding-carousel-pre-btn .icon-arrow:hover {
        color: #3370ff
    }

    .on-boarding-carousel .on-boarding-carousel-pre-btn .icon-arrow:before {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }

    .on-boarding-carousel-carousel-pane .on-boarding-carousel-header {
        padding: 42px 0 20px;
        background-size: cover;
        background-image: url(https://sf1-scmcdn-tos.pstatp.com/goofy/ee/approval/approval-admin/image/carousel/header-bg.png)
    }

    .on-boarding-carousel-carousel-pane .on-boarding-carousel-header-title {
        margin-bottom: 8px;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 24px;
        line-height: 36px;
        color: #fff;
        text-align: center
    }

    .on-boarding-carousel-carousel-pane .on-boarding-carousel-header-text-wrapper {
        display: flex;
        justify-content: center
    }

    .on-boarding-carousel-carousel-pane .on-boarding-carousel-header-text {
        width: 456px;
        height: 40px;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #fff;
        text-align: center
    }

    .on-boarding-carousel-carousel-pane .on-boarding-carousel-body {
        padding: 36px 66px 74px
    }

    .on-boarding-carousel-carousel-pane .on-boarding-carousel-image-wrapper {
        position: relative;
        height: 312px;
        overflow: hidden
    }

    .on-boarding-carousel-carousel-pane .on-boarding-carousel-image-wrapper > img {
        width: 100%
    }

    .on-boarding-carousel-carousel-pane .on-boarding-carousel-image-wrapper .on-boarding-carousel-image-text {
        position: absolute
    }

    .on-boarding-carousel-bottom-mask {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%
    }

    .on-boarding-carousel-bottom-mask img {
        width: 100%;
        height: 100%
    }

    .on-boarding-carousel-carousel-pane.pane-4 {
        position: relative
    }

    .on-boarding-carousel .on-boarding-carousel-start-wrapper {
        display: flex;
        justify-content: center;
        position: absolute;
        bottom: 68px;
        z-index: 1;
        width: 100%
    }

    .on-boarding-carousel .on-boarding-carousel-start-wrapper .ant-btn.ant-btn-primary {
        color: #fff;
        border-color: #3370ff;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        min-width: 160px;
        height: 40px
    }

    .on-boarding-carousel .on-boarding-carousel-start-wrapper .ant-btn.ant-btn-primary:hover {
        background-color: #4e83fd;
        border-color: #4e83fd
    }

    .on-boarding-carousel .on-boarding-carousel-start-wrapper .ant-btn.ant-btn-primary:active {
        background-color: #245bdb;
        border-color: #245bdb
    }

    .on-boarding-carousel .on-boarding-carousel-start-wrapper .ant-btn.ant-btn-primary[disabled] {
        background-color: #bacefd;
        border-color: #bacefd
    }

    .on-boarding-carousel-modal .ant-carousel .slick-dots-bottom {
        bottom: 24px
    }

    .on-boarding-carousel-modal .slick-dots li {
        margin: 0 6px;
        width: 8px;
        height: 8px;
        border-radius: 4px;
        opacity: .5;
        background-color: #8f959e
    }

    .on-boarding-carousel-modal .slick-dots li.slick-active {
        opacity: 1
    }

    .on-boarding-carousel-modal .ant-carousel .slick-dots li button {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #8f959e
    }

    .on-boarding-carousel-image-text-step-1-group {
        position: absolute
    }

    .on-boarding-carousel-image-text-step-1-group-title {
        color: #1f2329;
        overflow: hidden;
        white-space: nowrap
    }

    .on-boarding-carousel-image-text-step-1-group-text {
        height: 60px;
        color: #8f959e;
        font-size: 14px;
        line-height: 20px;
        white-space: pre-wrap;
        overflow: hidden
    }

    .on-boarding-carousel-image-text-step-1-group:first-of-type {
        top: 36px;
        left: 20px
    }

    .on-boarding-carousel-image-text-step-1-group:first-of-type .on-boarding-carousel-image-text-step-1-group-text, .on-boarding-carousel-image-text-step-1-group:first-of-type .on-boarding-carousel-image-text-step-1-group-title {
        width: 160px
    }

    .on-boarding-carousel-image-text-step-1-group:nth-of-type(2) {
        top: 162px;
        left: 73px
    }

    .on-boarding-carousel-image-text-step-1-group:nth-of-type(2) .on-boarding-carousel-image-text-step-1-group-text, .on-boarding-carousel-image-text-step-1-group:nth-of-type(2) .on-boarding-carousel-image-text-step-1-group-title {
        width: 120px
    }

    .on-boarding-carousel-image-text-step-1-group:nth-of-type(3) {
        top: 267px;
        left: 51px
    }

    .on-boarding-carousel-image-text-step-1-group:nth-of-type(3) .on-boarding-carousel-image-text-step-1-group-text, .on-boarding-carousel-image-text-step-1-group:nth-of-type(3) .on-boarding-carousel-image-text-step-1-group-title {
        width: 120px
    }

    .on-boarding-carousel-image-text-step-1-group:nth-of-type(4) {
        top: 14px;
        left: 280px
    }

    .on-boarding-carousel-image-text-step-1-group:nth-of-type(4) .on-boarding-carousel-image-text-step-1-group-text, .on-boarding-carousel-image-text-step-1-group:nth-of-type(4) .on-boarding-carousel-image-text-step-1-group-title {
        width: 140px
    }

    .on-boarding-carousel-image-text-step-1-group:nth-of-type(5) {
        top: 123px;
        left: 284px
    }

    .on-boarding-carousel-image-text-step-1-group:nth-of-type(5) .on-boarding-carousel-image-text-step-1-group-text, .on-boarding-carousel-image-text-step-1-group:nth-of-type(5) .on-boarding-carousel-image-text-step-1-group-title {
        width: 160px
    }

    .on-boarding-carousel-image-text-step-1-group:nth-of-type(6) {
        top: 251px;
        left: 282px
    }

    .on-boarding-carousel-image-text-step-1-group:nth-of-type(6) .on-boarding-carousel-image-text-step-1-group-text, .on-boarding-carousel-image-text-step-1-group:nth-of-type(6) .on-boarding-carousel-image-text-step-1-group-title {
        width: 120px
    }

    .on-boarding-carousel-image-text-step-2-panel {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }

    .on-boarding-carousel-image-text-step-2-group {
        margin-bottom: 12px;
        display: flex;
        justify-content: space-between
    }

    .on-boarding-carousel-image-text-step-2-group .on-boarding-carousel-image-text-step-2-group-left, .on-boarding-carousel-image-text-step-2-group .on-boarding-carousel-image-text-step-2-group-right {
        width: 253px;
        height: 60px;
        padding: 19px 0 19px 72px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }

    .on-boarding-carousel-image-text-step-3-panel {
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        position: absolute;
        top: 45px;
        left: 43px;
        width: 500px;
        height: 500px;
        color: #646a73
    }

    .on-boarding-carousel-image-text-step-3-thead {
        display: flex;
        justify-content: flex-start
    }

    .on-boarding-carousel-image-text-step-3-th {
        padding-top: 10px;
        padding-bottom: 10px;
        overflow: hidden;
        white-space: nowrap
    }

    .on-boarding-carousel-image-text-step-3-th:first-of-type {
        width: 100px;
        padding-left: 22px
    }

    .on-boarding-carousel-image-text-step-3-th:nth-of-type(2), .on-boarding-carousel-image-text-step-3-th:nth-of-type(3), .on-boarding-carousel-image-text-step-3-th:nth-of-type(4) {
        width: 100px;
        padding-left: 24px
    }

    .on-boarding-carousel-image-text-step-3-tr {
        display: flex;
        justify-content: flex-start
    }

    .on-boarding-carousel-image-text-step-3-tr:first-of-type .on-boarding-carousel-image-text-step-3-td, .on-boarding-carousel-image-text-step-3-tr:nth-of-type(2) .on-boarding-carousel-image-text-step-3-td, .on-boarding-carousel-image-text-step-3-tr:nth-of-type(3) .on-boarding-carousel-image-text-step-3-td, .on-boarding-carousel-image-text-step-3-tr:nth-of-type(4) .on-boarding-carousel-image-text-step-3-td {
        height: 45px
    }

    .on-boarding-carousel-image-text-step-3-td {
        padding-top: 10px;
        padding-bottom: 10px;
        overflow: hidden;
        white-space: nowrap
    }

    .on-boarding-carousel-image-text-step-3-td:first-of-type {
        width: 100px;
        padding-left: 22px
    }

    .on-boarding-carousel-image-text-step-3-td:nth-of-type(2), .on-boarding-carousel-image-text-step-3-td:nth-of-type(3), .on-boarding-carousel-image-text-step-3-td:nth-of-type(4) {
        width: 100px;
        padding-left: 24px
    }

    .on-boarding-carousel-image-text-step-3-td.on-boarding-carousel-image-text-step-3-td-focus {
        color: #1f2329
    }

    .on-boarding-carousel-image-text-step-4-panel {
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        color: #646a73
    }

    .on-boarding-carousel-image-text-step-4-td-name {
        height: 20px;
        overflow: hidden;
        white-space: nowrap
    }

    .on-boarding-carousel-image-text-step-4-td-department {
        height: 20px;
        color: #646a73;
        overflow: hidden;
        white-space: nowrap
    }

    .on-boarding-carousel-image-text-step-4-panel .on-boarding-carousel-image-text-step-4-thead {
        display: flex;
        justify-content: flex-start;
        margin-bottom: 10px;
        color: #646a73
    }

    .on-boarding-carousel-image-text-step-4-panel .on-boarding-carousel-image-text-step-4-thead .on-boarding-carousel-image-text-step-4-th {
        height: 30px;
        overflow: hidden;
        white-space: nowrap;
        padding-top: 5px;
        padding-bottom: 5px
    }

    .on-boarding-carousel-image-text-step-4-panel .on-boarding-carousel-image-text-step-4-thead .on-boarding-carousel-image-text-step-4-th:first-of-type {
        width: 180px;
        padding-left: 80px
    }

    .on-boarding-carousel-image-text-step-4-panel .on-boarding-carousel-image-text-step-4-thead .on-boarding-carousel-image-text-step-4-th:nth-of-type(2) {
        width: 110px;
        padding-left: 24px
    }

    .on-boarding-carousel-image-text-step-4-panel .on-boarding-carousel-image-text-step-4-thead .on-boarding-carousel-image-text-step-4-th:nth-of-type(3) {
        width: 120px;
        padding-left: 24px
    }

    .on-boarding-carousel-image-text-step-4-panel .on-boarding-carousel-image-text-step-4-thead .on-boarding-carousel-image-text-step-4-th:nth-of-type(4) {
        width: 100px;
        padding-left: 24px
    }

    .on-boarding-carousel-image-text-step-4-panel .on-boarding-carousel-image-text-step-4-tr {
        display: flex;
        justify-content: flex-start;
        margin-bottom: 10px;
        color: #1f2329
    }

    .on-boarding-carousel-image-text-step-4-panel .on-boarding-carousel-image-text-step-4-tr .on-boarding-carousel-image-text-step-4-td {
        overflow: hidden;
        white-space: nowrap;
        height: 58px
    }

    .on-boarding-carousel-image-text-step-4-panel .on-boarding-carousel-image-text-step-4-tr .on-boarding-carousel-image-text-step-4-td:first-of-type {
        width: 180px;
        padding-left: 80px;
        padding-top: 9px;
        padding-bottom: 9px
    }

    .on-boarding-carousel-image-text-step-4-panel .on-boarding-carousel-image-text-step-4-tr .on-boarding-carousel-image-text-step-4-td:nth-of-type(2) {
        width: 110px;
        padding-left: 24px;
        padding-top: 17px;
        padding-bottom: 17px
    }

    .on-boarding-carousel-image-text-step-4-panel .on-boarding-carousel-image-text-step-4-tr .on-boarding-carousel-image-text-step-4-td:nth-of-type(3) {
        width: 120px;
        padding-left: 24px;
        padding-top: 17px;
        padding-bottom: 17px
    }

    .on-boarding-carousel-image-text-step-4-panel .on-boarding-carousel-image-text-step-4-tr .on-boarding-carousel-image-text-step-4-td:nth-of-type(4) {
        width: 100px;
        padding-left: 24px;
        padding-top: 17px;
        padding-bottom: 17px
    }

    .on-boarding-create-popover.ant-popover-placement-left > .ant-popover-content > .ant-popover-arrow, .on-boarding-create-popover.ant-popover-placement-leftBottom > .ant-popover-content > .ant-popover-arrow, .on-boarding-create-popover.ant-popover-placement-leftTop > .ant-popover-content > .ant-popover-arrow {
        border-color: #3370ff
    }

    .on-boarding-create-popover .ant-popover-inner-content {
        padding: 0
    }

    .on-boarding-create-popover .on-boarding-create-popover-content {
        position: relative;
        padding: 16px 20px;
        width: 280px;
        background-color: #3370ff;
        border-radius: 4px
    }

    .on-boarding-create-popover .on-boarding-create-popover-content-close {
        position: absolute;
        top: 16px;
        right: 20px;
        z-index: 1;
        line-height: 16px;
        height: 16px;
        color: #fff;
        cursor: pointer
    }

    .on-boarding-create-popover .on-boarding-create-popover-content-close .icon-close:before {
        display: block;
        line-height: 12px;
        width: 12px;
        font-size: 12px;
        color: #fff;
        opacity: .8;
        text-align: center
    }

    .on-boarding-create-popover .on-boarding-create-popover-content-title {
        margin-bottom: 12px;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 12px;
        line-height: 12px;
        color: #fff;
        opacity: .8
    }

    .on-boarding-create-popover .on-boarding-create-popover-content-text {
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #fff
    }

    .on-boarding-popover.ant-popover-inner {
        background-color: initial
    }

    .on-boarding-popover.ant-popover-placement-bottom > .ant-popover-content > .ant-popover-arrow, .on-boarding-popover.ant-popover-placement-bottomLeft > .ant-popover-content > .ant-popover-arrow, .on-boarding-popover.ant-popover-placement-bottomRight > .ant-popover-content > .ant-popover-arrow, .on-boarding-popover.ant-popover-placement-left > .ant-popover-content > .ant-popover-arrow, .on-boarding-popover.ant-popover-placement-leftBottom > .ant-popover-content > .ant-popover-arrow, .on-boarding-popover.ant-popover-placement-leftTop > .ant-popover-content > .ant-popover-arrow, .on-boarding-popover.ant-popover-placement-right > .ant-popover-content > .ant-popover-arrow, .on-boarding-popover.ant-popover-placement-rightBottom > .ant-popover-content > .ant-popover-arrow, .on-boarding-popover.ant-popover-placement-rightTop > .ant-popover-content > .ant-popover-arrow, .on-boarding-popover.ant-popover-placement-top > .ant-popover-content > .ant-popover-arrow, .on-boarding-popover.ant-popover-placement-topLeft > .ant-popover-content > .ant-popover-arrow, .on-boarding-popover.ant-popover-placement-topRight > .ant-popover-content > .ant-popover-arrow {
        border-color: #3370ff
    }

    .on-boarding-popover .ant-popover-inner-content {
        padding: 12px 20px;
        background-color: #3370ff;
        border-radius: 4px
    }

    .on-boarding-popover-content {
        position: relative
    }

    .on-boarding-popover-step {
        margin-bottom: 12px;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 12px;
        line-height: 12px;
        color: #fff;
        opacity: .8
    }

    .on-boarding-popover-close {
        position: absolute;
        top: 0;
        right: 0;
        color: #fff;
        cursor: pointer
    }

    .on-boarding-popover-close .icon-close:before {
        display: block;
        line-height: 12px;
        width: 12px;
        font-size: 12px;
        color: #fff;
        opacity: .8;
        text-align: center
    }

    .on-boarding-popover-title {
        margin-bottom: 8px;
        font-size: 16px;
        line-height: 24px
    }

    .on-boarding-popover-text, .on-boarding-popover-title {
        width: 240px;
        font-family: PingFang SC, Microsoft YaHei;
        color: #fff
    }

    .on-boarding-popover-text {
        margin-bottom: 12px;
        font-size: 14px;
        line-height: 20px;
        white-space: pre-line
    }

    .on-boarding-popover-footer {
        text-align: right
    }

    .on-boarding-popover-footer .ant-btn {
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 12px;
        line-height: 12px;
        min-width: 60px;
        padding: 0 8px;
        height: 26px
    }

    .on-boarding-popover-footer .ant-btn:not(:last-of-type) {
        margin-right: 8px
    }

    .on-boarding-popover-footer .ant-btn.ant-btn-default, .on-boarding-popover-footer .ant-btn.ant-btn-default:active, .on-boarding-popover-footer .ant-btn.ant-btn-default:hover, .on-boarding-popover-footer .ant-btn.ant-btn-default:link, .on-boarding-popover-footer .ant-btn.ant-btn-default:visited {
        color: #fff;
        border-color: #fff;
        background-color: #3370ff;
        box-shadow: none;
        text-shadow: none
    }

    .on-boarding-popover-footer .ant-btn.ant-btn-primary, .on-boarding-popover-footer .ant-btn.ant-btn-primary:active, .on-boarding-popover-footer .ant-btn.ant-btn-primary:hover, .on-boarding-popover-footer .ant-btn.ant-btn-primary:link, .on-boarding-popover-footer .ant-btn.ant-btn-primary:visited {
        color: #3370ff;
        border-color: #fff;
        background-color: #fff;
        box-shadow: none;
        text-shadow: none
    }

    .on-boarding-frame-mask {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        min-width: 1128px
    }

    .on-boarding-frame-mask-center {
        position: absolute
    }

    .on-boarding-frame-mask-center-hover-pointer .on-boarding-frame-mask-center {
        cursor: pointer
    }

    .on-boarding-frame-mask-corner {
        position: absolute;
        height: 12px;
        width: 12px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none
    }

    .on-boarding-frame-mask-corner img {
        display: block;
        width: 100%;
        height: 100%
    }

    .on-boarding-frame-mask-corner-top-right {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg)
    }

    .on-boarding-frame-mask-corner-bottom-left {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg)
    }

    .on-boarding-frame-mask-corner-bottom-right {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }

    .on-boarding-frame-mask-bottom, .on-boarding-frame-mask-left, .on-boarding-frame-mask-right, .on-boarding-frame-mask-top {
        position: absolute;
        background-color: rgba(0, 0, 0, .2)
    }

    .on-boarding-qr-code-modal {
        min-width: 1128px
    }

    .on-boarding-qr-code-modal .ant-modal-body {
        padding-top: 46px;
        padding-bottom: 42px
    }

    .on-boarding-qr-code-modal .ant-modal-wrap {
        position: absolute
    }

    .on-boarding-qr-code-close {
        position: absolute;
        top: 20px;
        right: 20px;
        cursor: pointer
    }

    .on-boarding-qr-code-close .icon-close:before {
        display: block;
        line-height: 12px;
        width: 12px;
        font-size: 12px;
        color: #646a73;
        text-align: center
    }

    .on-boarding-qr-code-tip {
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        text-align: center
    }

    .on-boarding-qr-code-tip:nth-last-of-type(2) {
        margin-bottom: 8px
    }

    .on-boarding-qr-code-qr-code-wrapper {
        display: flex;
        justify-content: center
    }

    .on-boarding-qr-code-step {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        min-width: 1128px
    }

    .IconLib_shower {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        overflow: hidden;
        background-color: #ccc;
        cursor: pointer
    }

    .IconLib_shower img {
        width: 100%;
        height: 100%
    }

    .IconLib_list {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        position: absolute;
        top: 120%;
        left: 0;
        z-index: 1;
        padding: 14px;
        width: 285px;
        border: 1px solid #f4f4f4;
        border-radius: 4px;
        background-color: #fff;
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .12)
    }

    .IconLib_item {
        position: relative;
        border: 2px solid transparent;
        margin-bottom: 11px;
        border-radius: 50%
    }

    .IconLib_item:not(:nth-of-type(5n)) {
        margin-right: 11px
    }

    .IconLib_item:last-of-type, .IconLib_item:nth-last-of-type(2), .IconLib_item:nth-last-of-type(3), .IconLib_item:nth-last-of-type(4), .IconLib_item:nth-last-of-type(5) {
        margin-bottom: 0
    }

    .IconLib_item-selected {
        border-color: #00a8ff
    }

    .IconLib_itemInner {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #fff;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background-color: #ccc;
        cursor: pointer
    }

    .IconLib_itemInner img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        overflow: hidden
    }

    .IconLib_itemRight {
        position: absolute;
        width: 14px;
        height: 14px;
        bottom: -2px;
        right: -2px;
        color: #fff;
        background-color: #3370ff;
        border-radius: 50%;
        line-height: 1
    }

    .company-department {
        height: 36px;
        line-height: 36px
    }

    .company-department .name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1 1
    }

    .company-department .title {
        display: inline-flex;
        justify-content: space-between;
        border-radius: 6px;
        padding: 0 5px;
        cursor: pointer;
        width: 100%;
        align-items: center
    }

    .company-department .title:hover {
        background-color: #e6f7ff
    }

    .department-container .company-department .title {
        width: calc(100% - 32px)
    }

    .company-member {
        height: 36px;
        line-height: 36px
    }

    .company-member .name {
        white-space: nowrap;
        flex: 1 1;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .company-member .avatar {
        margin-left: 1px;
        margin-right: 4px
    }

    .company-member .title {
        display: inline-flex;
        justify-content: space-between;
        border-radius: 6px;
        padding: 0 5px;
        cursor: pointer;
        width: 100%;
        align-items: center
    }

    .company-member .title:hover {
        background-color: #e6f7ff
    }

    .company-member .title-avatar {
        padding-left: 0
    }

    .company-member .after {
        color: rgba(0, 0, 0, .45)
    }

    .department-container .company-member .title {
        width: calc(100% - 32px)
    }

    .department-container .company-member .title-avatar {
        margin-left: -4px;
        width: calc(100% - 28px)
    }

    .department-picker {
        display: flex;
        color: #252834
    }

    .department-picker .label {
        font-size: 14px;
        font-weight: 400;
        margin-bottom: 10px;
        color: #1c1f27
    }

    .department-picker .ant-col-12 {
        flex: 1 1
    }

    .department-picker .ant-col-12 section {
        border: 1px solid #e8e8e8;
        border-radius: 6px;
        background: #f4f5f6;
        padding: 12px;
        font-size: 14px
    }

    .department-picker .ant-col-12 section:last-child {
        height: calc(100% - 31px)
    }

    .department-picker .department-container {
        height: 360px;
        overflow-y: auto;
        margin-top: 8px
    }

    .department-picker .member-container {
        height: 456px;
        overflow-y: auto
    }

    .department-picker .ant-breadcrumb {
        margin: 10px 0;
        font-size: 14px
    }

    .department-picker .ant-breadcrumb .ant-breadcrumb-link {
        color: rgba(0, 0, 0, .45)
    }

    .department-picker .ant-breadcrumb .ant-breadcrumb-link a {
        color: #00a8ff
    }

    .department-picker .ant-checkbox-wrapper {
        width: 100%;
        flex: 1 1;
        font-size: 14px
    }

    .department-picker .ant-checkbox-wrapper .ant-checkbox-checked .ant-checkbox-inner {
        background-color: #00a8ff;
        border-color: #00a8ff
    }

    .department-picker .ant-checkbox-wrapper .ant-checkbox-input:focus + .ant-checkbox-inner, .department-picker .ant-checkbox-wrapper .ant-checkbox-wrapper:hover .ant-checkbox-inner, .department-picker .ant-checkbox-wrapper .ant-checkbox:hover .ant-checkbox-inner {
        border-color: #00a8ff
    }

    .department-picker .ant-checkbox-wrapper .ant-checkbox-indeterminate .ant-checkbox-inner:after {
        background: #00a8ff
    }

    .member-modal .ant-modal-body {
        padding: 20px 30px !important
    }

    .member-modal .company-iconfont, .member-modal .iconfont {
        margin-right: 8px;
        min-width: 14px;
        font-size: 14px;
        vertical-align: initial
    }

    .member-modal .ant-form-item-control {
        line-height: 1.5
    }

    .member-modal .ant-form-item-control.has-error .choose {
        border-color: #f5222d
    }

    .member-modal .ant-form-item-control.has-error .ant-input {
        border-color: #d9d9d9
    }

    .member-modal .ant-form-item-control.has-error .ant-input:focus, .member-modal .ant-form-item-control.has-error .ant-input:hover {
        border-color: #00a8ff;
        box-shadow: 0 0 0 2px rgba(24, 144, 255, .2)
    }

    .member-modal .ant-form-explain {
        margin-top: 6px
    }

    .candidate-selector-modal {
        z-index: 9999
    }

    .candidate-selector-modal .ant-modal-header {
        padding: 28px;
        border-bottom: none
    }

    .candidate-selector-modal .ant-modal-body {
        padding: 0 28px
    }

    .candidate-selector-modal .ant-modal-footer {
        padding: 28px;
        border-top: none
    }

    .candidate-selector-modal .ant-modal-footer .ant-btn {
        min-width: 80px
    }

    .candidate-selector-modal .footer {
        display: flex;
        align-items: center
    }

    .candidate-selector-modal .footer .tip {
        flex: auto;
        text-align: left;
        color: #7e838c
    }

    .candidate-selector-selector {
        display: flex;
        border: 1px solid #ededf0;
        height: 400px
    }

    .candidate-selector-candidate-part {
        border-right: .5px solid #ededf0;
        width: 50%
    }

    .candidate-selector-search-bar {
        height: 48px;
        padding: 16px 16px 0
    }

    .candidate-selector-search-bar .ant-input {
        height: 32px;
        background-color: #f6f6f7;
        border-color: #f6f6f7
    }

    .candidate-selector-search-bar .ant-input:focus {
        background-color: #fff;
        outline: none;
        border-color: #f6f6f7;
        box-shadow: none
    }

    .candidate-selector-candidate-list {
        height: calc(100% - 48px);
        overflow-y: auto
    }

    .candidate-selector-select-all {
        display: flex;
        padding: 16px;
        font-size: 14px;
        line-height: 22px;
        color: #161f31
    }

    .candidate-selector-select-all-title {
        flex-grow: 1
    }

    .candidate-selector-select-all-checkbox {
        flex-grow: 0;
        flex-shrink: 0
    }

    .candidate-selector-checkbox-wrapper .ant-checkbox-checked .ant-checkbox-inner {
        background-color: #4c84f7
    }

    .candidate-selector-checked-part {
        width: 50%
    }

    .candidate-selector-checked-total {
        padding: 16px 16px 0;
        font-size: 16px;
        line-height: 36px;
        height: 48px;
        color: #212121
    }

    .candidate-selector-checked-list {
        height: calc(100% - 48px);
        overflow-y: auto
    }

    .candidate-selector-person-item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 12px 16px;
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        cursor: pointer
    }

    .candidate-selector-person-item:hover {
        background-color: #ededf0
    }

    .candidate-selector-person-item-avatar {
        flex-shrink: 0;
        flex-grow: 0;
        margin-right: 8px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        overflow: hidden
    }

    .candidate-selector-person-item-avatar img {
        width: 100%;
        height: 100%
    }

    .candidate-selector-person-item-info {
        flex-shrink: 1;
        flex-grow: 1;
        width: calc(100% - 20px);
        overflow: hidden
    }

    .candidate-selector-person-item-title {
        font-size: 14px;
        line-height: 22px;
        color: #161f31;
        overflow: hidden;
        word-break: break-all;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .candidate-selector-person-item-sub-title {
        font-size: 12px;
        line-height: 18px;
        color: #7f838b;
        overflow: hidden;
        word-break: break-all;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .candidate-selector-person-item-right {
        flex-shrink: 0;
        flex-grow: 0
    }

    .candidate-selector-group-item-header {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        padding: 12px 16px;
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .candidate-selector-group-item-header:hover {
        background-color: #ededf0
    }

    .candidate-selector-group-item-fold-button {
        flex-shrink: 0;
        flex-grow: 0;
        position: absolute;
        left: 16px;
        top: 12px;
        margin-right: 8px;
        width: 32px;
        height: 22px;
        overflow: hidden
    }

    .candidate-selector-group-item-fold-button img {
        width: 100%;
        height: 100%
    }

    .candidate-selector-group-item-fold-button.candidate-selector-group-item-fold-button-disabled {
        display: none
    }

    .candidate-selector-group-item-info {
        flex-shrink: 1;
        flex-grow: 1;
        width: calc(100% - 20px)
    }

    .candidate-selector-group-item-title {
        padding-left: 24px;
        font-size: 14px;
        line-height: 22px;
        color: #161f31;
        overflow: hidden;
        word-break: break-all;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .candidate-selector-group-item-right {
        flex-shrink: 0;
        flex-grow: 0
    }

    .candidate-selector-group-item-children {
        padding-left: 20px
    }

    .candidate-selector-group-item-children .candidate-selector-group-item-children .candidate-selector-group-item-children .candidate-selector-group-item-children {
        padding-left: 0
    }

    .candidate-selector-group-item .icon-Expand {
        line-height: 24px;
        font-size: 14px
    }

    .candidate-selector-group-item .icon-Expand:before {
        display: block;
        -webkit-transform: rotate(-90deg) scale(.5);
        transform: rotate(-90deg) scale(.5);
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        width: 16px
    }

    .candidate-selector-group-item .icon-Expand.unfolded:before {
        display: block;
        -webkit-transform: rotate(0) scale(.5);
        transform: rotate(0) scale(.5)
    }

    .ApprovalInfo {
        display: none;
        margin-left: 78px;
        padding-top: 40px
    }

    .ApprovalInfo.visible {
        display: block
    }

    .ApprovalInfo .approvalinfo-form .ant-form-item .ant-form-item-label {
        text-align: left
    }

    .ApprovalInfo .approvalinfo-form .approvalinfo-admin-select-wrapper {
        display: flex;
        flex-wrap: wrap
    }

    .ApprovalInfo .approvalinfo-form .approvalinfo-admin-select-wrapper .ApprovalInfo_admin_user {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        position: relative;
        margin: 0 0 10px;
        cursor: pointer
    }

    .ApprovalInfo .approvalinfo-form .approvalinfo-admin-select-wrapper .ApprovalInfo_admin_user:hover .ApprovalInfo_deleteButton {
        opacity: .5
    }

    .ApprovalInfo .approvalinfo-form .approvalinfo-admin-select-wrapper .ApprovalInfo_admin_user:hover .ApprovalInfo_deleteButton:hover {
        opacity: 1
    }

    .ApprovalInfo .approvalinfo-form .approvalinfo-admin-select-wrapper .ApprovalInfo_deleteButton {
        position: absolute;
        top: 0;
        right: 20px;
        width: 12px;
        height: 12px;
        line-height: 12px;
        font-size: 12px;
        border-radius: 50%;
        text-align: center;
        opacity: 0;
        z-index: 2
    }

    .ApprovalInfo .approvalinfo-form .approvalinfo-admin-select-wrapper .ApprovalInfo_member {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 48px;
        font-size: 12px;
        line-height: 17px;
        color: #212121;
        text-align: center;
        margin-right: 20px
    }

    .ApprovalInfo .approvalinfo-form .approvalinfo-admin-select-wrapper .ApprovalInfo_memberAvatar {
        position: relative;
        margin-bottom: 8px;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        overflow: hidden;
        background-color: #f4f5f6
    }

    .ApprovalInfo .approvalinfo-form .approvalinfo-admin-select-wrapper .ApprovalInfo_memberAvatar.permission:hover .avatar {
        -webkit-filter: brightness(.4);
        filter: brightness(.4)
    }

    .ApprovalInfo .approvalinfo-form .approvalinfo-admin-select-wrapper .ApprovalInfo_memberAvatar.permission:hover:after {
        font-family: iconfont-approval-admin !important;
        display: flex;
        align-items: center;
        justify-content: center;
        content: "\E641";
        width: 20px;
        height: 20px;
        font-size: 16px;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        color: #fff;
        opacity: .7
    }

    .ApprovalInfo .approvalinfo-form .approvalinfo-admin-select-wrapper .ApprovalInfo_memberAvatar .avatar {
        width: 100%;
        height: 100%
    }

    .ApprovalInfo .approvalinfo-form .approvalinfo-admin-select-wrapper .ApprovalInfo_memberAvatar .setting {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        font-size: 16px;
        width: 20px;
        height: 20px;
        color: hsla(0, 0%, 100%, .7)
    }

    .ApprovalInfo .approvalinfo-form .approvalinfo-admin-select-wrapper .ApprovalInfo_memberName {
        width: 100px
    }

    .ApprovalInfo .approvalinfo-form .ApprovalInfo_admin_explain {
        margin-top: 10px
    }

    .ApprovalInfo_iconSelectorFormItem .ant-form-item-label {
        line-height: 48px
    }

    .ApprovalInfo_iconSelector {
        position: relative;
        display: flex;
        align-items: center
    }

    .ApprovalInfo_iconButton {
        margin-left: 16px;
        color: #00a8ff;
        font-size: 12px;
        line-height: 48px;
        cursor: pointer
    }

    .ApprovalInfo_tagList {
        margin-top: 12px;
        display: flex;
        flex-wrap: wrap
    }

    .ApprovalInfo_tagItem {
        margin-right: 10px;
        margin-bottom: 6px;
        padding: 2px 8px;
        line-height: 20px;
        font-size: 14px;
        opacity: .85;
        color: #000;
        border-radius: 4px;
        cursor: default
    }

    .ApprovalInfo_tagItem.ApprovalInfo_tagItemDepartment {
        background-color: rgba(54, 134, 255, .1)
    }

    .ApprovalInfo_tagItem.ApprovalInfo_tagItemMember {
        background-color: rgba(0, 206, 125, .1)
    }

    .ApprovalInfo_modifyButton {
        color: #00a8ff;
        font-size: 14px;
        line-height: 24px;
        cursor: pointer
    }

    .ApprovalInfo .ant-form-item-required {
        white-space: normal;
        position: relative
    }

    .ApprovalInfo .ant-form-item-required:before {
        position: absolute;
        bottom: 0;
        right: -4px
    }

    .ApprovalInfo .ant-form-item-control-wrapper {
        padding-left: 8px
    }

    .FormEditorComponent_option {
        display: flex;
        align-items: center
    }

    .FormEditorComponent_option:not(:last-of-type) {
        margin-bottom: 8px
    }

    .FormEditorComponent_optionButton {
        margin-left: 12px;
        width: 20px;
        height: 20px;
        line-height: 20px;
        border-radius: 50%;
        text-align: center;
        color: #d8d8d8;
        cursor: pointer
    }

    .FormEditorComponent_optionButton:hover {
        color: #d8d8d8
    }

    .instructions-textarea {
        word-break: break-all
    }

    .InlineFormItemGroup {
        display: flex;
        align-items: center
    }

    .InlineFormItemGroup_Label {
        text-align: right;
        color: #252834
    }

    .InlineFormItemGroup_Label:after {
        content: ":";
        position: relative;
        top: -.5px;
        margin: 0 8px 0 2px
    }

    .InlineFormItemGroup_Wrapper {
        display: flex
    }

    .InlineFormItemGroup_Wrapper .ant-checkbox-wrapper {
        height: 28px;
        line-height: 28px;
        padding: 0 12px;
        border-radius: 14px;
        background-color: #f5f6fa
    }

    .FormulaEditor_row {
        display: flex;
        margin-bottom: 16px
    }

    .FormulaEditor_rowKey {
        flex: 0 0 135px;
        margin-top: 7px;
        text-align: right
    }

    .FormulaEditor_rowValue {
        flex-grow: 1
    }

    .FormulaEditor_formulaContainer {
        margin-bottom: 9px;
        border: 1px solid #d8d8d8;
        padding: 8px 12px 14px 8px;
        border-radius: 6px
    }

    .FormulaEditor_formulaContent {
        display: flex;
        flex-wrap: wrap;
        min-height: 74px;
        font-size: 14px;
        color: #252834
    }

    .FormulaEditor_formulaContentPlaceholder {
        font-size: 12px;
        line-height: 21px;
        color: #9e9e9e
    }

    .FormulaEditor_contentItem {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0 8px 8px 0;
        padding: 0 7px;
        height: 24px;
        line-height: 24px;
        font-size: 18px;
        border-radius: 6px;
        text-align: center;
        color: #252834;
        background-color: #f4f5f6
    }

    .FormulaEditor_contentItem-invalid {
        color: #f51e1e
    }

    .FormulaEditor_formulaOperations {
        display: flex;
        justify-content: flex-end;
        align-items: center
    }

    .FormulaEditor_varsContainer {
        display: flex;
        flex-wrap: wrap
    }

    .FormulaEditor_varsItem {
        margin: 0 12px 12px 0;
        padding: 8px 12px;
        font-size: 18px;
        line-height: 20px;
        border-radius: 6px;
        text-align: center;
        color: #252834;
        background-color: #f4f5f6;
        cursor: pointer
    }

    .FormulaEditor_keysContainer {
        display: flex;
        flex-wrap: wrap;
        width: 312px
    }

    .FormulaEditor_keysItem {
        width: 40px;
        height: 36px;
        margin: 0 12px 12px 0;
        font-size: 18px;
        line-height: 36px;
        border-radius: 6px;
        text-align: center;
        color: #252834;
        background-color: #f4f5f6;
        cursor: pointer
    }

    .FormulaEditor_keysItem:last-of-type, .FormulaEditor_keysItem:nth-last-of-type(2), .FormulaEditor_keysItem:nth-last-of-type(3), .FormulaEditor_keysItem:nth-last-of-type(4), .FormulaEditor_keysItem:nth-last-of-type(5), .FormulaEditor_keysItem:nth-last-of-type(6) {
        margin-bottom: 0
    }

    .FormulaEditor_overlay.ant-tooltip {
        max-width: 300px
    }

    .FormulaEditor_overlay .ant-tooltip-arrow {
        border-top-color: #fff
    }

    .FormulaEditor_overlay .ant-tooltip-inner {
        padding: 16px;
        font-size: 12px;
        color: #1c1f27;
        background-color: #fff;
        box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .1)
    }

    .FormulaShower {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 9px;
        padding: 4px 11px;
        line-height: 22px;
        border: 1px solid #d8d8d8;
        border-radius: 6px;
        background-color: #fff
    }

    .Formula_formula {
        display: flex;
        justify-content: space-between
    }

    .Formula_formulaShowerWrapper {
        flex-grow: 1
    }

    .Formula_modifyButton {
        margin-left: 10px;
        font-size: 14px;
        line-height: 32px;
        color: #00a8ff;
        cursor: pointer
    }

    .Formula_intro {
        font-size: 14px;
        line-height: 20px;
        color: #9e9e9e
    }

    .Formula_intro .Formula_link {
        margin-left: 8px;
        color: #00a8ff;
        cursor: pointer
    }

    .Formula_formulaEditor .ant-modal-header {
        padding: 30px;
        border-bottom: none
    }

    .Formula_formulaEditor .ant-modal-body {
        padding: 0 83px 0 24px
    }

    .Formula_formulaEditor .ant-modal-footer {
        padding: 14px 83px 30px 24px;
        border-top: none
    }

    .data-source.ant-form-item {
        margin-bottom: 12px
    }

    .data-source .ant-radio-wrapper {
        height: 28px;
        line-height: 28px;
        border-radius: 14px;
        background-color: #f5f6fa;
        display: inline-flex;
        align-items: center;
        padding: 0 8px
    }

    .data-source .ant-radio-wrapper-checked {
        border: 1px solid #006aff;
        background-color: #e8effe
    }

    .relative-approval .relative-approval-types {
        margin-left: 110px
    }

    .relative-approval .relative-approval-types .ant-table {
        border-left: 1px solid #e9eaf2;
        border-top: 1px solid #e9eaf2;
        border-right: 1px solid #e9eaf2;
        font-size: 12px;
        color: #18263c
    }

    .relative-approval .relative-approval-types .ant-table .ant-table-thead tr > th {
        color: #60758a !important
    }

    .relative-approval .relative-approval-types .ant-table .ant-table-tbody > tr > td, .relative-approval .relative-approval-types .ant-table .ant-table-thead > tr > th {
        padding: 9px 0
    }

    .relative-approval .ant-pagination-jump-next, .relative-approval .ant-pagination-jump-prev, .relative-approval .ant-pagination-prev {
        margin-right: 4px
    }

    .leave-group__editor {
        padding: 8px;
        margin-left: 100px
    }

    .leave-group__editor .header {
        margin-bottom: 20px
    }

    .leave-group__editor .header__left {
        color: #000;
        font-weight: 500
    }

    .leave-group__editor .header__right {
        color: #4575f6;
        cursor: pointer
    }

    .leave-group__editor .footer {
        margin-top: 20px;
        color: #a1a5ad;
        text-align: center
    }

    .leave-group__editor .ant-table-wrapper {
        border: 1px solid #f1f1f1
    }

    .work-group__editor {
        padding: 8px 0;
        margin-left: 100px
    }

    .work-group__editor .title {
        font-size: 16px;
        font-weight: 500;
        color: #212121;
        line-height: 2
    }

    .work-group__editor .sub-title {
        font-size: 12px;
        color: #8691a3
    }

    .work-group__editor .wrapper-row {
        margin: 2em 0
    }

    .work-group__editor .box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1em
    }

    .work-group__editor .box-item {
        flex: auto;
        width: 100%;
        overflow: hidden;
        max-width: 20em
    }

    .work-group__editor .box-label {
        width: 10em;
        text-align: center;
        color: #d8d8d8
    }

    .work-group__editor .box-label .iconfont-approval-admin {
        cursor: pointer
    }

    .shift-group__editor {
        padding: 8px 0
    }

    .shift-group__editor .title {
        font-size: 16px;
        font-weight: 500;
        color: #212121;
        line-height: 2
    }

    .shift-group__editor .sub-title {
        font-size: 12px;
        color: #8691a3
    }

    .trip-group__editor {
        padding: 8px 0
    }

    .trip-group__editor .title {
        font-size: 16px;
        font-weight: 500;
        color: #212121;
        margin-bottom: 1em
    }

    .trip-group__editor .sub-title {
        font-size: 14px;
        color: #212121;
        margin-bottom: 1em
    }

    .form-widget-address {
        padding-left: 12px;
        background-color: #fff
    }

    .form-widget-address-selector {
        padding: 12px 12px 12px 0
    }

    .form-widget-address-selector-title {
        width: 100%
    }

    .form-widget-address-selector-title-text {
        display: inline-block;
        font-size: 14px;
        line-height: 21px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #333
    }

    .form-widget-address-selector-title-text-required {
        position: relative;
        padding-right: 12px
    }

    .form-widget-address-selector-title-text-required:after {
        content: "*";
        position: absolute;
        top: 0;
        right: 4px;
        color: #f51e1e
    }

    .form-widget-address-selector + .form-widget-address-textarea {
        border-top: 1px solid #ededf0
    }

    .form-widget-address-selector-placeholder {
        display: flex;
        margin-top: 12px;
        width: 100%;
        font-size: 12px;
        line-height: 21px;
        color: #9e9e9e
    }

    .form-widget-address-selector-placeholder-text {
        flex-grow: 1;
        width: 100%;
        word-break: break-all;
        text-overflow: ellipsis
    }

    .form-widget-address-selector-right-arrow {
        flex-shrink: 0
    }

    .form-widget-address-textarea {
        padding: 12px 36px 12px 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }

    .form-widget-address-textarea-title {
        position: relative;
        padding-right: 12px;
        font-size: 14px;
        line-height: 21px;
        color: #333
    }

    .form-widget-address-textarea-title-required:after {
        content: "*";
        position: absolute;
        top: 0;
        right: 4px;
        color: #f51e1e
    }

    .form-widget-address-textarea-placeholder {
        font-size: 12px;
        line-height: 21px;
        color: #9e9e9e
    }

    .BaseViewerComponent {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px;
        background-color: #fff
    }

    .BaseViewerComponent_label {
        padding-right: 12px;
        height: 21px;
        line-height: 21px;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #212121
    }

    .BaseViewerComponent_label-required {
        position: relative
    }

    .BaseViewerComponent_label-required:before {
        content: "*";
        position: absolute;
        right: 4px;
        top: 0;
        color: #f51e1e
    }

    .BaseViewerComponent_right {
        height: 21px;
        line-height: 21px;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #9e9e9e
    }

    .BaseViewerComponent_rightArrow {
        margin-left: 8px
    }

    .BaseViewerComponent_valueSuffix {
        font-size: 14px;
        color: #212121
    }

    .BaseFileViewerComponent {
        padding: 12px;
        background-color: #fff
    }

    .BaseFileViewerComponent_header {
        display: flex;
        justify-content: space-between;
        align-items: center
    }

    .BaseFileViewerComponent_label {
        margin-bottom: 10px;
        padding-right: 12px;
        font-size: 14px;
        color: #212121
    }

    .BaseFileViewerComponent_label-required {
        position: relative
    }

    .BaseFileViewerComponent_label-required:before {
        content: "*";
        position: absolute;
        right: 4px;
        top: 0;
        color: #f51e1e
    }

    .BaseFileViewerComponent_body {
        height: 3em
    }

    .BaseFileViewerComponent_value {
        font-size: 12px;
        color: #9e9e9e
    }

    .BaseFileViewerComponent_selectFile {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 34px;
        height: 34px;
        background-color: #f4f5f6
    }

    .ComponentTypesList {
        width: 346px;
        background-color: #fff;
        border: 1px solid #f4f4f4;
        border-radius: 4px;
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .12)
    }

    .ComponentTypesList .ant-tabs-nav {
        width: 100%
    }

    .ComponentTypesList .ant-tabs-nav > div:first-of-type {
        display: flex
    }

    .ComponentTypesList .ant-tabs-nav .ant-tabs-tab {
        flex-grow: 1;
        margin: 0;
        text-align: center
    }

    .ComponentGroupList_list {
        height: 342px;
        padding: 11px
    }

    .ComponentGroupList_list, .ComponentTypesList_list {
        display: flex;
        flex-wrap: wrap;
        padding: 11px
    }

    .ComponentTypesList_item {
        margin-bottom: 8px;
        width: 72px;
        height: 74px;
        border: 1px solid #f4f5f6;
        border-radius: 4px;
        background-color: #f4f5f6;
        cursor: pointer
    }

    .ComponentTypesList_item:not(:nth-of-type(4n)) {
        margin-right: 11px
    }

    .ComponentTypesList_item:last-of-type, .ComponentTypesList_item:nth-last-of-type(2), .ComponentTypesList_item:nth-last-of-type(3), .ComponentTypesList_item:nth-last-of-type(4) {
        margin-bottom: 0
    }

    .ComponentTypesList_item:hover {
        border-color: #00a8ff;
        background-color: rgba(0, 168, 255, .1)
    }

    .ComponentTypesList_itemIcon {
        margin: 8px auto 4px;
        width: 24px;
        height: 24px
    }

    .ComponentTypesList_itemIcon .iconfont-approval-admin {
        font-size: 24px
    }

    .ComponentTypesList_itemTitle {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 36px;
        font-size: 12px;
        color: #252834;
        text-align: center
    }

    .DetailsComponent {
        background-color: #f4f5f6
    }

    .DetailsComponent_header {
        display: flex;
        padding: 10px 0 2px 12px
    }

    .DetailsComponent_title {
        font-size: 12px;
        line-height: 18px;
        color: #9e9e9e;
        font-weight: 400
    }

    .DetailsComponent_addSubComs {
        padding: 16px;
        font-size: 12px;
        border-bottom: 1px solid #f4f4f4;
        text-align: center;
        background-color: #fff
    }

    .DetailsComponent_addSubComs .DetailsComponent_addSubComsTips {
        margin-bottom: 9px;
        line-height: 18px;
        color: #9e9e9e
    }

    .DetailsComponent_addSubComs .DetailsComponent_addSubComsButton {
        line-height: 17px;
        color: #3370ff
    }

    .DetailsComponent_addSubComs .DetailsComponent_addSubComsButton .icon-add {
        font-size: 9px;
        margin-right: 4px
    }

    .DetailsComponent_addDetails {
        padding: 14px 0 12px;
        font-size: 12px;
        line-height: 17px;
        color: #9e9e9e;
        text-align: center;
        background-color: #fff
    }

    .DetailsComponent_addDetails .icon-add {
        font-size: 9px;
        margin-right: 4px
    }

    .DetailsComponent_componentTypesListWrapper {
        position: fixed;
        z-index: 10;
        bottom: 0;
        left: 0
    }

    .Instructions {
        background-color: initial;
        color: #9e9e9e;
        padding: 10px 18px
    }

    .Instructions_header {
        padding-bottom: 4px
    }

    .Instructions_title {
        font-size: 12px
    }

    .Instructions_body .Instructions_instructions {
        word-break: break-all;
        font-size: 10px;
        min-height: 18px
    }

    .BaseMultiViewerComponent {
        padding: 12px;
        background-color: #fff
    }

    .BaseMultiViewerComponent_header {
        display: flex;
        justify-content: space-between;
        align-items: center
    }

    .BaseMultiViewerComponent_label {
        padding-right: 12px;
        font-size: 14px;
        color: #212121
    }

    .BaseMultiViewerComponent_label-required {
        position: relative
    }

    .BaseMultiViewerComponent_label-required:before {
        content: "*";
        position: absolute;
        right: 4px;
        top: 0;
        color: #f51e1e
    }

    .BaseMultiViewerComponent_body {
        min-height: 3em
    }

    .BaseMultiViewerComponent_value {
        font-size: 12px;
        color: #9e9e9e
    }

    .upgrade-button.ant-btn-primary.ant-btn-block {
        border-radius: 0;
        border: #3370ff;
        background-color: #3370ff
    }

    .upgrade-button.ant-btn > i.anticon {
        pointer-events: auto
    }

    .upgrade-confirm .ant-btn-primary {
        background-color: #3370ff
    }

    .TripGroup_addSubButton {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 44px;
        color: rgba(0, 106, 255, .6);
        font-size: 14px;
        background-color: #fff;
        border-top: 1px solid #f4f5f6;
        border-bottom: 1px solid #f4f5f6
    }

    .TripGroup_addSubButton .iconfont-approval-admin.icon-add {
        font-size: 14px;
        margin-right: .5em
    }

    .FormViewer_itemWrapper {
        position: relative;
        border: 1px solid transparent;
        cursor: pointer;
        margin-top: 4px
    }

    .FormViewer_itemWrapper:hover {
        border: 1px dashed #3370ff
    }

    .FormViewer_itemWrapper-active {
        border-color: #3370ff
    }

    .FormViewer_itemDelete {
        position: absolute;
        top: 0;
        right: 0;
        background-color: #3370ff;
        width: 14px;
        height: 14px;
        cursor: pointer
    }

    .FormViewer_itemDelete .icon-close {
        position: absolute;
        top: 0;
        right: 0;
        color: #fff
    }

    .FormViewer_itemDelete .icon-close:before {
        position: absolute;
        top: -1px;
        right: 1px;
        -webkit-transform: scale(.8);
        transform: scale(.8);
        font-size: 10px
    }

    .form-item-show-condition {
        margin-left: 100px;
        border-radius: 2px
    }

    .form-item-show-condition .form-item-show-condition-header {
        margin-bottom: 16px
    }

    .form-item-show-condition .form-item-show-condition-title {
        display: flex;
        align-items: center;
        margin-bottom: 5px;
        font-size: 14px;
        line-height: 20px;
        color: #252834
    }

    .form-item-show-condition .form-item-show-condition-switch .ant-switch {
        height: 25px
    }

    .form-item-show-condition .form-item-show-condition-switch .ant-switch-checked {
        background-color: #006aff
    }

    .form-item-show-condition .form-item-show-condition-switch .ant-switch:after {
        width: 21px;
        height: 21px;
        border-radius: 21px
    }

    .form-item-show-condition .form-item-show-condition-sub-title {
        font-size: 12px;
        color: #8691a3
    }

    .ApprovalForm {
        display: none;
        max-width: 1040px;
        padding: 40px 80px 0;
        margin-left: 60px;
        overflow: auto
    }

    .ApprovalForm.visible {
        display: block
    }

    .ApprovalForm_wrapper {
        display: flex;
        margin-bottom: 37px;
        position: relative;
        z-index: 1
    }

    .ApprovalForm_phone {
        position: relative;
        height: 574px;
        padding: 52px 14px 48px;
        background: #fff;
        border: 1px solid #eee;
        box-shadow: inset -1px 0 4px 0 rgba(57, 63, 89, .09), inset 0 -1px 1px 0 #c9cbd5, 0 0 20px rgba(57, 63, 89, .2);
        border-radius: 40px
    }

    .ApprovalForm_phone .earpiece {
        position: absolute;
        top: 22px;
        left: calc(50% - 25px);
        width: 50px;
        height: 8px;
        border-radius: 4px;
        background-color: #eaebf0
    }

    .ApprovalForm_phone:before {
        top: 120px
    }

    .ApprovalForm_phone:after, .ApprovalForm_phone:before {
        content: "";
        position: absolute;
        z-index: -1;
        left: -4px;
        background: #fff;
        box-shadow: inset -1px 0 4px 0 rgba(57, 63, 89, .09), 0 0 20px rgba(57, 63, 89, .2);
        width: 8px;
        height: 51px
    }

    .ApprovalForm_phone:after {
        top: 181px
    }

    .ApprovalForm_formViewerWrapper {
        flex-shrink: 0;
        position: relative;
        width: 266px;
        height: 472px
    }

    .ApprovalForm_componentTypesList {
        position: absolute;
        z-index: 5;
        bottom: 48px;
        left: -40px
    }

    .ApprovalForm_formEditorWrapper {
        flex-grow: 1
    }

    .ApprovalForm_formTitle {
        flex-shrink: 0;
        width: 100%;
        padding: 0 10px;
        height: 42px;
        font-size: 14px;
        text-align: center;
        line-height: 40px;
        border: 1px solid #ececec;
        border-radius: 4px 4px 0 0;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap
    }

    .ApprovalForm_formViewer {
        height: calc(100% - 80px);
        background-color: #ececec;
        overflow: auto
    }

    .ApprovalForm_formViewer .scrollarea .scrollbar-container {
        z-index: 1
    }

    .ApprovalForm_formViewer .scrollarea .scrollbar-container.vertical {
        width: 5px
    }

    .ApprovalForm_formViewer .scrollarea .scrollbar-container.vertical .scrollbar {
        width: 3px
    }

    .ApprovalForm_addButton {
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40px;
        font-size: 14px;
        color: #00a8ff;
        cursor: pointer;
        border: 1px solid #ececec;
        border-radius: 0 0 4px 4px
    }

    .ApprovalForm_addButton .icon-add {
        margin-right: 8px;
        font-size: 14px
    }

    .error-box {
        position: absolute;
        width: 343px;
        padding: 20px;
        z-index: 2;
        top: 170px;
        right: 0;
        border-radius: 2px;
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .2);
        background-color: #fff;
        -webkit-transform: translateX(800px);
        transform: translateX(800px);
        -webkit-transition: -webkit-transform .5s;
        transition: -webkit-transform .5s;
        transition: transform .5s;
        transition: transform .5s, -webkit-transform .5s
    }

    .error-box.visible {
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px)
    }

    .error-box .header {
        position: relative
    }

    .error-box .header .warning {
        color: #f7ce55
    }

    .error-box .header .title {
        color: #252834;
        font-weight: 600;
        margin-left: 8px
    }

    .error-box .header .close-btn {
        position: absolute;
        top: 3px;
        right: 0
    }

    .error-box .header .sub-title {
        font-size: 12px;
        color: #7f838b;
        line-height: 30px
    }

    .error-box .content {
        max-height: 144px;
        overflow: auto
    }

    .error-box .content .error-item {
        margin-top: 12px;
        border-radius: 2px;
        background-color: #f6f6f7;
        line-height: 38px;
        display: flex;
        font-size: 12px;
        padding: 0 12px
    }

    .error-box .content .step {
        font-weight: 600
    }

    .error-box .content .err {
        flex: 1 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0 10px
    }

    .error-box .content .anchor {
        color: #006aff;
        cursor: pointer
    }

    .CreateApproval {
        position: relative;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        overflow-x: hidden
    }

    .CreateApproval .error-box {
        z-index: 20
    }

    .ApprovalHeader_Container {
        background: #fff;
        box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .04);
        line-height: 1
    }

    .CreateApproval_breadcrumb {
        margin-left: 78px;
        padding-bottom: 20px
    }

    .CreateApproval_breadcrumb .ant-breadcrumb-link {
        color: #252834
    }

    .CreateApproval_breadcrumb .ant-breadcrumb-link a {
        color: #9e9e9e
    }

    .CreateApproval.old .CreateApproval_creator {
        padding: 20px 0 0;
        flex: 1 1;
        display: flex;
        flex-direction: column;
        margin-bottom: 0
    }

    .CreateApproval.old .CreateApproval_creator .create-approval-loading {
        flex: 1 1
    }

    .CreateApproval.old .CreateApproval_creator .create-approval-loading .ant-spin-container {
        height: 100%
    }

    .CreateApproval.old .CreateApproval_submit {
        position: relative;
        padding: 0 78px
    }

    .CreateApproval.old .CreateApproval_submit .approval-name {
        color: #18263c;
        font-size: 20px;
        vertical-align: middle;
        line-height: 32px
    }

    .CreateApproval.old .CreateApproval_submit .approval-submit-btn {
        float: right;
        height: 32px;
        border-radius: 2px;
        background-color: #006aff;
        margin-left: 12px;
        border: none;
        font-size: 14px;
        color: #fff
    }

    .CreateApproval.old .CreateApproval_stepBar {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        padding: 0 78px
    }

    .CreateApproval.old .CreateApproval_stepBarItem {
        position: relative;
        flex: 1 1;
        height: 48px;
        line-height: 48px;
        text-align: center;
        color: #18263c;
        background-color: #fff;
        border: 1px solid #e9eaf2;
        -webkit-transform: skewX(-10deg);
        transform: skewX(-10deg);
        margin-left: -1px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        cursor: pointer
    }

    .CreateApproval.old .CreateApproval_stepBarItem:first-of-type {
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px
    }

    .CreateApproval.old .CreateApproval_stepBarItem:last-of-type {
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px
    }

    .CreateApproval.old .CreateApproval_stepBarItem-active {
        color: #37f;
        border-color: #37f;
        border-width: 2px;
        z-index: 2
    }

    .CreateApproval.old .CreateApproval_stepBarItem-active .CreateApproval_stepBarCircle {
        border-color: #37f;
        background: #37f;
        color: #fff
    }

    .CreateApproval.old .CreateApproval_stepBarItemText {
        -webkit-transform: skewX(10deg);
        transform: skewX(10deg);
        display: flex;
        align-items: center
    }

    .CreateApproval.old .CreateApproval_stepBarCircle {
        display: inline-flex;
        font-style: normal;
        width: 16px;
        height: 16px;
        font-size: 10px;
        border: 1px solid #18263c;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        margin-right: 8px
    }

    .CreateApproval.old .CreateApproval_stepContent {
        height: 100%;
        padding-top: 40px
    }

    .CreateApproval.old .ApprovalForm, .CreateApproval.old .ApprovalInfo {
        padding-top: 0
    }

    .CreateApproval.new .CreateApproval_creator {
        flex: 1 1;
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
        padding-top: 64px
    }

    .CreateApproval.new .CreateApproval_creator .create-approval-loading {
        flex: 1 1
    }

    .CreateApproval.new .CreateApproval_creator .create-approval-loading .ant-spin-container {
        height: 100%
    }

    .CreateApproval.new .ant-btn.approval-submit-btn {
        position: absolute;
        top: 50%;
        right: 16px;
        margin-top: -16px;
        height: 32px;
        border-radius: 2px;
        background-color: #37f;
        margin-left: 12px;
        border: none;
        font-size: 14px;
        color: #fff
    }

    .CreateApproval.new .back-btn {
        display: flex;
        align-items: center;
        margin-left: 10px;
        cursor: pointer
    }

    .CreateApproval.new .back-btn .icon-arrow {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        font-size: 32px;
        color: #3e4759
    }

    .CreateApproval.new .CreateApproval_Header {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 10;
        display: flex;
        justify-content: center;
        background-color: #fff;
        border-bottom: 1px solid #ededf0
    }

    .CreateApproval.new .CreateApproval_stepBar {
        margin: 0 auto
    }

    .CreateApproval.new .CreateApproval_stepBarItem {
        position: relative;
        margin-right: 50px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        height: 64px;
        line-height: 64px;
        font-size: 18px;
        text-align: center;
        color: #18263c;
        box-sizing: border-box;
        cursor: pointer
    }

    .CreateApproval.new .CreateApproval_stepBarItem:last-child {
        margin-right: 0
    }

    .CreateApproval.new .CreateApproval_stepBarItem-active {
        color: #37f;
        border: solid #37f;
        border-width: 0 0 2px;
        z-index: 2
    }

    .CreateApproval.new .CreateApproval_stepBarItem-active .CreateApproval_stepBarCircle {
        border-color: #37f;
        background: #37f;
        color: #fff
    }

    .CreateApproval.new .CreateApproval_stepBarItemText {
        display: flex;
        align-items: center
    }

    .CreateApproval.new .CreateApproval_stepBarCircle {
        display: inline-flex;
        font-style: normal;
        width: 21px;
        height: 21px;
        font-size: 16px;
        border: 1px solid #18263c;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        margin-right: 8px
    }

    .CreateApproval.new .CreateApproval_stepContent {
        height: 100%
    }

    .CreateApproval .ant-input[type=text], .CreateApproval .ant-select-selection--single {
        height: 36px
    }

    .CreateApproval .ant-select-selection--single .ant-select-selection__rendered {
        line-height: 34px
    }

    input.approval-input, textarea.approval-input {
        width: 180px;
        padding: 6px 11px;
        font-size: 14px;
        border: 1px solid #d8d8d8;
        border-radius: 2px;
        box-shadow: none;
        color: #18263c;
        line-height: 24px
    }

    input.approval-input:focus, input.approval-input:hover, textarea.approval-input:focus, textarea.approval-input:hover {
        border-color: #2152d9
    }

    input.approval-input::-webkit-input-placeholder, textarea.approval-input::-webkit-input-placeholder {
        color: #ccc
    }

    input.approval-input::-moz-placeholder, textarea.approval-input::-moz-placeholder {
        color: #ccc
    }

    input.approval-input::-ms-input-placeholder, textarea.approval-input::-ms-input-placeholder {
        color: #ccc
    }

    input.approval-input::placeholder, textarea.approval-input::placeholder {
        color: #ccc
    }

    input.approval-input {
        height: 36px
    }

    textarea.approval-input {
        height: 72px
    }

    .on-boarding {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        min-width: 1128px
    }

    .icon-lib-list {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        position: absolute;
        top: 120%;
        left: 0;
        z-index: 1;
        padding: 14px;
        width: 285px;
        border: 1px solid #f4f4f4;
        border-radius: 4px;
        background-color: #fff;
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .12)
    }

    .icon-lib-item {
        position: relative;
        border: 2px solid transparent;
        margin-bottom: 11px;
        border-radius: 50%
    }

    .icon-lib-item:not(:nth-of-type(5n)) {
        margin-right: 11px
    }

    .icon-lib-item:last-of-type, .icon-lib-item:nth-last-of-type(2), .icon-lib-item:nth-last-of-type(3), .icon-lib-item:nth-last-of-type(4), .icon-lib-item:nth-last-of-type(5) {
        margin-bottom: 0
    }

    .icon-lib-item-selected {
        border-color: #3370ff
    }

    .icon-lib-item-inner {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #fff;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background-color: #ccc;
        cursor: pointer
    }

    .icon-lib-item-inner img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        overflow: hidden
    }

    .icon-lib-item-right {
        display: none;
        position: absolute;
        width: 14px;
        height: 14px;
        bottom: -2px;
        right: -2px;
        color: #fff;
        background-color: #3370ff;
        border-radius: 50%;
        line-height: 1
    }

    .icon-lib-item-right .icon-checked {
        font-size: 14px;
        line-height: 1
    }

    .icon-lib-item-selected .icon-lib-item-right {
        display: block
    }

    .external-checkbox-wrap .ant-checkbox-wrapper {
        margin-right: 6px
    }

    .base-info {
        margin: 0 auto;
        padding: 24px 0;
        height: 100%;
        text-align: center;
        overflow-y: auto;
        background-color: #eff0f1
    }

    .base-info-panel {
        display: inline-block;
        width: 1128px;
        padding: 24px 288px;
        background-color: #fff;
        text-align: left
    }

    .base-info-icon {
        display: flex;
        justify-content: flex-start;
        align-items: center
    }

    .base-info-icon-shower {
        margin-right: 16px;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        overflow: hidden
    }

    .base-info-icon-shower img {
        width: 100%;
        height: 100%
    }

    .base-info-icon-modify-btn {
        color: #3370ff;
        padding: 1em 1em 1em 0;
        cursor: pointer
    }

    .base-info-group-wrapper .ant-select, .base-info-group-wrapper .approval-select {
        display: block
    }

    .base-info-process-manager-list {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap
    }

    .base-info-process-manager-item {
        flex-grow: 0;
        flex-shrink: 0;
        display: flex;
        margin-bottom: 24px
    }

    .base-info-process-manager-item-1-2 {
        width: 50%
    }

    .base-info-process-manager-item-1-3 {
        width: 33%
    }

    .base-info-process-manager-item-1-2:nth-last-of-type(2), .base-info-process-manager-item-1-3:nth-last-of-type(2), .base-info-process-manager-item-1-3:nth-last-of-type(3) {
        margin-bottom: 0
    }

    .base-info-process-manager-item-avatar {
        flex-shrink: 0;
        margin-right: 12px;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        overflow: hidden
    }

    .base-info-process-manager-item-avatar img {
        width: 100%;
        height: 100%
    }

    .base-info-process-manager-item-name {
        margin-bottom: 6px;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #1f2329
    }

    .base-info-process-manager-item-edit-btn {
        margin-right: 24px;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #8f959e;
        cursor: pointer
    }

    .base-info-process-manager-item-edit-btn:hover {
        color: #3370ff
    }

    .base-info-process-manager-item-delete-btn {
        margin-right: 24px;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #8f959e;
        cursor: pointer
    }

    .base-info-process-manager-item-delete-btn:hover {
        color: #f54a45
    }

    .base-info-process-manager-add-btn {
        width: 48px;
        height: 48px;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        background-color: #eff0f1;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .base-info-help-doc {
        color: #1f2329
    }

    .base-info-help-doc a {
        color: #3370ff
    }

    .revoke-setting-main-text {
        color: #1f2329;
        font-size: 14px;
        line-height: 22px;
        font-weight: 550;
        margin-bottom: 8px
    }

    .revoke-setting-label-wrapper {
        color: #1f2329;
        display: inline-flex;
        align-items: center
    }

    .revoke-setting-checkbox {
        margin-right: 9.5px
    }

    .revoke-setting-input {
        width: 64px;
        height: 32px;
        margin: 0 8px;
        color: #1f2329;
        border: 1px solid #e4e5e7
    }

    .revoke-setting-input.error {
        border: 1px solid #f54a45
    }

    .revoke-setting-input.disabled {
        background-color: #fff;
        color: #e4e5e7
    }

    .revoke-setting-error-msg {
        color: #f54a45;
        margin-left: 25.5px;
        margin-top: 4px
    }

    .revoke-setting-sub-text {
        color: #646a73;
        margin-top: 8px;
        font-size: 14px;
        line-height: 22px
    }

    .share-setting-main-text {
        font-weight: 550
    }

    .share-setting-label-wrapper {
        color: #1f2329;
        display: flex;
        align-items: center
    }

    .share-setting-main-text {
        color: #1f2329;
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 8px
    }

    .share-setting-checkbox {
        margin-right: 9.5px
    }

    .share-setting-sub-text {
        color: #646a73;
        font-size: 14px;
        margin-top: 8px;
        line-height: 22px
    }

    .other-settings-wrapper {
        margin: 0 auto;
        padding: 24px 0;
        text-align: center;
        overflow-y: auto;
        height: 100%;
        background-color: #eff0f1
    }

    .other-settings-panel {
        display: inline-block;
        width: 1128px;
        padding: 26px 342px 24px 324px;
        background-color: #fff;
        text-align: left
    }

    .other-settings-setting-item:not(:first-child) {
        margin-top: 34px
    }

    .other-settings-checkbox {
        margin-right: 9.5px
    }

    .other-settings-sub-text {
        color: #646a73;
        font-size: 14px;
        line-height: 22px
    }

    .leave-group-editor-footer {
        margin-top: 16px
    }

    .leave-group-editor-table .ant-table-pagination.mini {
        margin-bottom: 0
    }

    .leave-group-editor-table .ant-table-row.disabled {
        background-color: #f5f6f7
    }

    .leave-group-editor-table .ant-table-row.disabled td.leave-group-editor-table-row-name, .leave-group-editor-table .ant-table-row.disabled td.leave-group-editor-table-row-unit {
        color: #8f959e
    }

    .display-condition-expression-editor .display-condition-expression-editor-standard-value-with-unit {
        display: flex;
        justify-content: flex-start;
        align-items: center
    }

    .display-condition-expression-editor .display-condition-expression-editor-standard-value-unit {
        flex-shrink: 0;
        padding-left: 4px
    }

    .display-condition-expression-editor .display-condition-expression-editor-comparison-sign, .display-condition-expression-editor .display-condition-expression-editor-condition-name, .display-condition-expression-editor .display-condition-expression-editor-standard-value {
        width: 100%;
        margin-bottom: 8px
    }

    .display-condition-expression-editor .display-condition-expression-editor-comparison-sign .ant-select, .display-condition-expression-editor .display-condition-expression-editor-condition-name .ant-select, .display-condition-expression-editor .display-condition-expression-editor-standard-value .ant-select {
        display: block;
        width: 100%
    }

    .display-condition-expression-editor .display-condition-expression-editor-comparison-sign .approval-select, .display-condition-expression-editor .display-condition-expression-editor-condition-name .approval-select, .display-condition-expression-editor .display-condition-expression-editor-standard-value .approval-select {
        display: block
    }

    .display-condition-expression-editor .display-condition-expression-editor-comparison-sign .ant-input, .display-condition-expression-editor .display-condition-expression-editor-condition-name .ant-input, .display-condition-expression-editor .display-condition-expression-editor-standard-value .ant-input {
        width: 100%
    }

    .display-condition-expression-editor .display-condition-expression-editor-comparison-sign .ant-select-selection--multiple .ant-select-selection__rendered > ul > li, .display-condition-expression-editor .display-condition-expression-editor-condition-name .ant-select-selection--multiple .ant-select-selection__rendered > ul > li, .display-condition-expression-editor .display-condition-expression-editor-standard-value .ant-select-selection--multiple .ant-select-selection__rendered > ul > li {
        height: 24px
    }

    .display-condition-expression-editor .display-condition-expression-editor-comparison-sign .ant-select-search.ant-select-search--inline, .display-condition-expression-editor .display-condition-expression-editor-condition-name .ant-select-search.ant-select-search--inline, .display-condition-expression-editor .display-condition-expression-editor-standard-value .ant-select-search.ant-select-search--inline {
        width: 0
    }

    .display-condition-expression-editor .display-condition-expression-editor-comparison-sign .ant-select-selection.ant-select-selection--multiple, .display-condition-expression-editor .display-condition-expression-editor-condition-name .ant-select-selection.ant-select-selection--multiple, .display-condition-expression-editor .display-condition-expression-editor-standard-value .ant-select-selection.ant-select-selection--multiple {
        height: 100%;
        overflow: hidden
    }

    .display-condition-expression-editor .display-condition-expression-editor-standard-value-leave-interval-unit {
        display: flex
    }

    .display-condition-expression-editor .display-condition-expression-editor-standard-value-leave-interval-unit .display-condition-expression-editor-standard-value-leave-interval {
        margin-right: 4px;
        width: 50%
    }

    .display-condition-expression-editor .display-condition-expression-editor-standard-value-leave-interval-unit .display-condition-expression-editor-standard-value-leave-unit {
        margin-left: 4px;
        width: 50%
    }

    .display-condition-expression-editor .display-condition-expression-editor-expression-tip {
        margin-bottom: 8px;
        color: #a1a5ad;
        font-size: 14px
    }

    .display-condition-expression-editor .display-condition-expression-editor-expression-tip .display-condition-expression-editor-expression-tip-icon {
        display: inline-block;
        height: 16px;
        width: 16px;
        margin-right: 4px;
        line-height: 16px;
        font-size: 12px;
        border: 1px solid #a1a5ad;
        border-radius: 50%;
        color: #a1a5ad;
        text-align: center
    }

    .display-condition-expression-editor .display-condition-expression-editor-expression-tip .display-condition-expression-editor-expression-tip-text {
        margin: 0 0 8px -12px;
        padding: 0 0 0 12px;
        font-size: 14px;
        cursor: pointer
    }

    .display-condition-expression-editor-expression-tip-overlay-wrapper {
        background-color: initial
    }

    .display-condition-expression-editor-expression-tip-overlay-wrapper .ant-tooltip-inner {
        background-color: #fff
    }

    .display-condition-expression-editor-expression-tip-overlay-wrapper.ant-tooltip {
        width: 400px;
        max-width: none
    }

    .display-condition-expression-editor-expression-tip-overlay-wrapper.ant-tooltip-placement-top .ant-tooltip-arrow, .display-condition-expression-editor-expression-tip-overlay-wrapper.ant-tooltip-placement-topLeft .ant-tooltip-arrow, .display-condition-expression-editor-expression-tip-overlay-wrapper.ant-tooltip-placement-topRight .ant-tooltip-arrow {
        border-top-color: #fff
    }

    .display-condition-expression-editor-expression-tip-overlay-wrapper.ant-tooltip-placement-top .ant-tooltip-arrow:before, .display-condition-expression-editor-expression-tip-overlay-wrapper.ant-tooltip-placement-topLeft .ant-tooltip-arrow:before, .display-condition-expression-editor-expression-tip-overlay-wrapper.ant-tooltip-placement-topRight .ant-tooltip-arrow:before {
        background-color: #fff
    }

    .display-condition-expression-editor-expression-tip-overlay-wrapper.ant-tooltip-placement-bottom .ant-tooltip-arrow, .display-condition-expression-editor-expression-tip-overlay-wrapper.ant-tooltip-placement-bottomLeft .ant-tooltip-arrow, .display-condition-expression-editor-expression-tip-overlay-wrapper.ant-tooltip-placement-bottomRight .ant-tooltip-arrow {
        border-bottom-color: #fff
    }

    .display-condition-expression-editor-expression-tip-overlay-wrapper.ant-tooltip-placement-bottom .ant-tooltip-arrow:before, .display-condition-expression-editor-expression-tip-overlay-wrapper.ant-tooltip-placement-bottomLeft .ant-tooltip-arrow:before, .display-condition-expression-editor-expression-tip-overlay-wrapper.ant-tooltip-placement-bottomRight .ant-tooltip-arrow:before {
        background-color: #fff
    }

    .display-condition-expression-editor-expression-tip-overlay-wrapper .display-condition-expression-editor-expression-tip-overlay .display-condition-expression-editor-expression-tip-overlay-title {
        margin-bottom: 24px;
        font-size: 16px;
        line-height: 20px;
        color: #1f2329
    }

    .display-condition-expression-editor-expression-tip-overlay-wrapper .display-condition-expression-editor-expression-tip-overlay .display-condition-expression-editor-expression-tip-overlay-sub-title {
        margin-bottom: 12px;
        font-size: 14px;
        line-height: 20px;
        color: #9ca2a9
    }

    .display-condition-expression-editor-expression-tip-overlay-wrapper .display-condition-expression-editor-expression-tip-overlay .display-condition-expression-editor-expression-tip-overlay-image, .display-condition-expression-editor-expression-tip-overlay-wrapper .display-condition-expression-editor-expression-tip-overlay .display-condition-expression-editor-expression-tip-overlay-image img {
        width: 100%
    }

    .display-condition-editor .display-condition-editor-tip {
        margin-bottom: 27px;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #8f959e
    }

    .display-condition-editor .display-condition-editor-condition-group {
        border: 1px solid #e4e5e7;
        border-radius: 4px
    }

    .display-condition-editor .display-condition-editor-condition-group .display-condition-editor-condition-group-header {
        display: flex;
        justify-content: space-between;
        padding: 10px 12px;
        height: 40px;
        background-color: #f5f6f7
    }

    .display-condition-editor .display-condition-editor-condition-group .display-condition-editor-condition-group-title {
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        height: 20px;
        color: #1f2329
    }

    .display-condition-editor .display-condition-editor-condition-group .display-condition-editor-condition-group-delete-button {
        flex-grow: 0;
        flex-shrink: 0
    }

    .display-condition-editor .display-condition-editor-condition-group .display-condition-editor-condition-group-body {
        padding: 8px 12px
    }

    .display-condition-editor .display-condition-editor-between-group {
        margin: 8px 0;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #646a73
    }

    .display-condition-editor .display-condition-editor-add-expression {
        font-size: 14px;
        line-height: 24px
    }

    .display-condition-editor .display-condition-editor-add-expression div {
        color: #3370ff;
        cursor: pointer
    }

    .display-condition-editor .display-condition-editor-expression {
        margin-bottom: 8px
    }

    .display-condition-editor .display-condition-editor-expression:nth-child(-1) {
        margin-bottom: 14px
    }

    .display-condition-editor .display-condition-editor-expression-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px
    }

    .display-condition-editor .display-condition-editor-expression-prefix {
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #8f959e
    }

    .display-condition-editor .display-condition-editor-expression-delete-button {
        margin-left: 12px;
        cursor: pointer
    }

    .display-condition-editor .display-condition-editor-condition-group + .display-condition-editor-add-condition-group {
        margin-top: 8px
    }

    .display-condition-editor .display-condition-editor-add-condition-group {
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #3370ff;
        cursor: pointer
    }

    .display-condition-panel-title {
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 8px;
        color: #1f2329
    }

    .date-interval-type-radio-wrapper {
        margin-bottom: 8px
    }

    .date-interval-type-radio-wrapper:last-of-type {
        margin-bottom: 0
    }

    .date-interval-item-checkbox-icon {
        margin-left: 8px;
        color: #9ca2a9
    }

    .address-editor-switch.ant-switch-checked {
        background-color: #3370ff
    }

    .address-viewer {
        padding-left: 12px;
        background-color: #fff
    }

    .address-viewer-title {
        display: flex;
        justify-content: flex-start
    }

    .address-viewer-name {
        margin-bottom: 6px;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        min-height: 20px;
        color: #1f2329;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .address-viewer-title .address-viewer-star {
        color: #f54a45
    }

    .address-viewer-select {
        padding: 12px 12px 12px 0
    }

    .address-viewer-select-placeholder {
        margin-bottom: 6px;
        min-height: 28px;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #8f959e
    }

    .address-viewer-detail {
        padding: 12px 12px 12px 0;
        border-top: 1px solid #ededf0
    }

    .address-viewer-detail-placeholder {
        min-height: 28px;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #8f959e
    }

    .address-viewer-detail-star {
        color: #f54a45
    }

    .instruction-viewer {
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #646a73;
        padding: 12px
    }

    .instruction-viewer:not(:last-child):before {
        position: absolute;
        margin-top: -13px;
        left: 12px;
        right: 1px;
        height: 1px;
        content: "";
        background-color: #fff !important
    }

    .field-item {
        position: relative;
        padding: 4px 0;
        background-color: initial
    }

    .field-item .field-item-inner-wrapper {
        position: relative;
        border: 1px solid transparent;
        cursor: move
    }

    .field-item .field-item-inner-wrapper > div:not(:last-child):not(.instruction-viewer):after {
        position: absolute;
        bottom: 0;
        left: 12px;
        right: 0;
        height: 1px;
        content: "";
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        background-color: #e4e5e7
    }

    .field-item.field-item-readonly .field-item-inner-wrapper {
        cursor: not-allowed
    }

    .field-item.field-item-dragging.field-item-error > .field-item-inner-wrapper, .field-item.field-item-error > .field-item-inner-wrapper {
        border-color: #f54a45;
        opacity: 1
    }

    .field-item:hover > .field-item-inner-wrapper {
        border-color: rgba(51, 112, 255, .5)
    }

    .field-item:hover > .field-item-inner-wrapper-error {
        border-color: rgba(245, 74, 69, .5)
    }

    .field-item:hover > .field-item-delete-button {
        display: block
    }

    .field-item.field-item-dragging .field-item-inner-wrapper, .field-item.field-item-dragging:hover .field-item-inner-wrapper {
        border-color: rgba(0, 0, 0, .2);
        opacity: .5
    }

    .field-item.field-item-dragging .field-item-delete-button, .field-item.field-item-dragging:hover .field-item-delete-button {
        display: none
    }

    .field-item.field-item-focus > .field-item-inner-wrapper {
        border-color: #3370ff
    }

    .field-item.field-item-focus > .field-item-inner-wrapper-error {
        border-color: #f54a45
    }

    .field-item.field-item-focus > .field-item-inner-wrapper > .field-item-delete-button {
        display: block;
        z-index: 1
    }

    .field-item-delete-button {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        width: 20px;
        height: 20px;
        border-bottom-left-radius: 20px;
        color: #fff;
        background-color: #3370ff;
        cursor: pointer
    }

    .field-item-delete-button-error {
        background-color: #f54a45
    }

    .field-item-delete-button span {
        position: absolute;
        top: 0;
        right: 0;
        width: 16px;
        height: 16px;
        line-height: 16px;
        font-size: 16px;
        text-align: center
    }

    .field-item .app-inactive {
        background-color: #fde2e2;
        border: 0;
        border-radius: 0;
        margin-bottom: -4px;
        margin-top: 4px;
        padding-top: 12px;
        padding-bottom: 12px
    }

    .field-item .app-inactive .ant-alert-icon {
        color: #f54a45;
        top: 14.5px;
        left: 12px
    }

    .field-list-insert-placeholder {
        position: relative;
        height: 1px;
        background-color: #3370ff
    }

    .field-list-insert-placeholder:before {
        content: "";
        position: absolute;
        top: -6px;
        left: 0;
        border: 7px solid transparent;
    }

    .field-list-insert-placeholder:after {
        content: "";
        position: absolute;
        top: -6px;
        right: 0;
        border: 7px solid transparent;
        border-right-color: #3370ff
    }

    .widget-view-detail .widget-view-detail-header {
        padding: 8px;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        min-height: 36px;
        color: #1f2329;
        background-color: #fff;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .widget-view-detail .widget-view-detail-body {
        border: 1px solid transparent;
        border-width: 1px 0
    }

    .widget-view-detail .widget-view-detail-placeholder {
        padding: 1em 0;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #8f959e;
        text-align: center
    }

    .widget-view-detail .widget-view-detail-placeholder-active {
        background-color: rgba(51, 112, 255, .2)
    }

    .widget-view-detail .widget-view-detail-placeholder-error {
        background-color: rgba(245, 74, 69, .2)
    }

    .widget-view-detail .widget-view-detail-footer {
        padding: 8px;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: rgba(51, 112, 255, .5);
        text-align: center;
        background-color: #fff
    }

    .formula-editor-modal .ant-modal-header {
        padding: 30px;
        border-bottom: none
    }

    .formula-editor-modal .ant-modal-body {
        padding: 0 30px
    }

    .formula-editor-modal .ant-modal-footer {
        padding: 30px;
        border-top: none
    }

    .formula-editor-modal .ant-modal-footer .ant-btn {
        width: 100px
    }

    .formula-editor-row {
        display: flex;
        margin-bottom: 16px
    }

    .formula-editor-row-key {
        flex: 0 0 135px;
        margin-top: 7px;
        text-align: right
    }

    .formula-editor-row-value {
        flex-grow: 1
    }

    .formula-editor-error {
        margin-bottom: 8px
    }

    .formula-editor-formula-container {
        margin-bottom: 9px;
        border: 1px solid #d8d8d8;
        padding: 8px 12px 14px 8px;
        border-radius: 6px
    }

    .formula-editor-formula-content {
        display: flex;
        flex-wrap: wrap;
        min-height: 74px;
        font-size: 14px;
        color: #252834
    }

    .formula-editor-formula-content-empty {
        display: block
    }

    .formula-editor-formula-content-placeholder {
        font-size: 12px;
        line-height: 21px;
        color: #9e9e9e
    }

    .formula-editor-formula-content-equal {
        padding: 0 4px
    }

    .formula-editor-content-item {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0 8px 8px 0;
        padding: 0 7px;
        height: 24px;
        line-height: 24px;
        font-size: 18px;
        border-radius: 6px;
        text-align: center;
        color: #252834;
        background-color: #f4f5f6;
        white-space: nowrap
    }

    .formula-editor-content-item-invalid {
        color: #f51e1e
    }

    .formula-editor-formula-operations {
        display: flex;
        justify-content: flex-end;
        align-items: center
    }

    .formula-editor-vars-container {
        display: flex;
        flex-wrap: wrap
    }

    .formula-editor-vars-item {
        margin: 0 12px 12px 0;
        padding: 8px 12px;
        font-size: 18px;
        line-height: 20px;
        border-radius: 6px;
        text-align: center;
        color: #252834;
        background-color: #f4f5f6;
        cursor: pointer
    }

    .formula-editor-keys-container {
        display: flex;
        flex-wrap: wrap;
        width: 312px
    }

    .formula-editor-keys-item {
        width: 40px;
        height: 36px;
        margin: 0 12px 12px 0;
        font-size: 18px;
        line-height: 36px;
        border-radius: 6px;
        text-align: center;
        color: #252834;
        background-color: #f4f5f6;
        cursor: pointer
    }

    .formula-editor-keys-item:last-of-type, .formula-editor-keys-item:nth-last-of-type(2), .formula-editor-keys-item:nth-last-of-type(3), .formula-editor-keys-item:nth-last-of-type(4), .formula-editor-keys-item:nth-last-of-type(5), .formula-editor-keys-item:nth-last-of-type(6) {
        margin-bottom: 0
    }

    .formula-editor-overlay.ant-tooltip {
        max-width: 300px
    }

    .formula-editor-overlay .ant-tooltip-arrow {
        border-top-color: #fff
    }

    .formula-editor-overlay .ant-tooltip-inner {
        padding: 16px;
        font-size: 12px;
        color: #1c1f27;
        background-color: #fff;
        box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .1)
    }

    .relative-approval-editor-approval-list .relative-approval-editor-approval-item {
        position: relative;
        margin-bottom: 8px
    }

    .relative-approval-editor-approval-list .relative-approval-editor-approval-name {
        display: inline;
        position: relative;
        padding: 2px 24px 2px 8px;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #646a73;
        background-color: #f5f6f7
    }

    .relative-approval-editor-approval-list .relative-approval-editor-approval-item .relative-approval-editor-delete-btn {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 8px;
        height: 8px;
        line-height: 8px;
        color: #8f959e;
        cursor: pointer
    }

    .relative-approval-editor-add-btn {
        padding: 2px 0;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #3370ff;
        cursor: pointer
    }

    .relative-approval-editor-add-btn span:last-of-type {
        margin-left: 4px
    }

    .relative-approval-editor-approval-panel {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        border: 1px solid #e4e5e7;
        height: 440px
    }

    .relative-approval-editor-approval-pool {
        flex-grow: 1;
        flex-shrink: 1;
        width: 50%;
        height: 100%;
        padding: 8px 8px 0;
        border-right: 1px solid #e4e5e7
    }

    .relative-approval-editor-approval-search {
        margin: 7px
    }

    .relative-approval-editor-approval-search .ant-input {
        border-color: #f6f6f7;
        background-color: #f6f6f7;
        outline: none
    }

    .relative-approval-editor-approval-search .ant-input-affix-wrapper:hover .ant-input:not(.ant-input-disabled), .relative-approval-editor-approval-search .ant-input:hover {
        border-color: #e4e5e7
    }

    .relative-approval-editor-approval-search .ant-input:focus {
        border-color: #e4e5e7;
        box-shadow: none;
        background-color: #fff
    }

    .relative-approval-editor-approval-tree {
        height: calc(100% - 56px);
        overflow-y: auto
    }

    .relative-approval-editor-approval-selected-list {
        flex-grow: 1;
        flex-shrink: 1;
        width: 50%;
        height: 100%
    }

    .relative-approval-editor-approval-selected-list .ant-list {
        display: flex;
        flex-direction: column;
        height: 100%
    }

    .relative-approval-editor-approval-selected-list .ant-list-header {
        flex-shrink: 0;
        flex-grow: 0;
        padding: 21px 16px 13px;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #1f2329
    }

    .relative-approval-editor-approval-selected-list .ant-spin-nested-loading {
        flex-shrink: 1;
        flex-grow: 1;
        height: calc(100% - 54px);
        overflow-y: auto
    }

    .relative-approval-editor-approval-selected-item {
        display: flex;
        align-items: center;
        padding: 10px 16px;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #1f2329
    }

    .relative-approval-editor-approval-selected-item:hover {
        background-color: #f7f9fc
    }

    .relative-approval-editor-approval-selected-item-title {
        flex: auto
    }

    .relative-approval-editor-approval-selected-item-operate {
        flex: none;
        cursor: pointer
    }

    .relative-approval-editor-approval-selected-list .ant-list-empty-text {
        display: none
    }

    .relative-approval-editor-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected, .relative-approval-editor-tree li .ant-tree-node-content-wrapper:hover {
        background-color: inherit
    }

    .relative-approval-editor-tree.ant-tree.ant-tree-show-line li span.ant-tree-switcher-noop, .relative-approval-editor-tree li span.ant-tree-switcher-noop {
        background: transparent
    }

    .relative-approval-editor-tree.ant-tree.ant-tree-show-line li:before {
        content: " ";
        width: 1px;
        border-left: 1px solid #e9eaf2;
        height: 100%;
        position: absolute;
        left: 12px;
        top: 0;
        margin: 0
    }

    .relative-approval-editor-tree.ant-tree.ant-tree-show-line li {
        padding: 0
    }

    .relative-approval-editor-tree.ant-tree.ant-tree-show-line li:last-child:before {
        height: 20px;
        bottom: 8px
    }

    .relative-approval-editor-tree.ant-tree.ant-tree-show-line li ul {
        padding-left: 24px
    }

    .relative-approval-editor-tree.ant-tree.ant-tree-show-line li span.ant-tree-checkbox, .relative-approval-editor-tree.ant-tree.ant-tree-show-line li span.ant-tree-switcher {
        top: 8px
    }

    .relative-approval-editor-tree.ant-tree.ant-tree-show-line li span.ant-tree-checkbox:after {
        border-color: #3370ff
    }

    .relative-approval-editor-tree.ant-tree.ant-tree-show-line .ant-tree-checkbox-checked .ant-tree-checkbox-inner {
        background-color: #3370ff;
        border-color: #3370ff
    }

    .relative-approval-editor-tree.ant-tree.ant-tree-show-line .ant-tree-checkbox-indeterminate .ant-tree-checkbox-inner:after {
        background-color: #3370ff
    }

    .relative-approval-editor-tree.ant-tree.ant-tree-show-line .ant-tree-checkbox-input:focus + .ant-tree-checkbox-inner, .relative-approval-editor-tree.ant-tree.ant-tree-show-line .ant-tree-checkbox-wrapper:hover .ant-tree-checkbox-inner, .relative-approval-editor-tree.ant-tree.ant-tree-show-line .ant-tree-checkbox:hover .ant-tree-checkbox-inner {
        border-color: #3370ff
    }

    .relative-approval-editor-tree.ant-tree.ant-tree-show-line li .ant-tree-node-content-wrapper {
        height: 40px;
        line-height: 40px
    }

    .relative-approval-editor-tree.ant-tree.ant-tree-show-line.ant-tree-icon-hide > li:first-child:before {
        height: calc(100% - 12px);
        top: 20px
    }

    .relative-approval-editor-tree.ant-tree.ant-tree-show-line li .ant-tree-switcher-noop > i {
        visibility: hidden
    }

    .relative-approval-editor-tree.ant-tree.ant-tree-show-line li .ant-tree-switcher-noop:after {
        content: " ";
        height: 1px;
        border-bottom: 1px solid #d9d9d9;
        width: 10px;
        position: absolute;
        left: 12px;
        top: 50%;
        margin: 0
    }

    .relative-approval-editor-tree.ant-tree.ant-tree-show-line .ant-tree-title {
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #1f2329
    }

    .relative-approval-editor-tree.ant-tree.ant-tree-show-line .anticon.anticon-minus-square.ant-tree-switcher-line-icon:after {
        font-family: iconfont-approval-admin !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: "\E646";
        line-height: 1em;
        height: 1em;
        width: 1em;
        position: absolute;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        -webkit-transition: -webkit-transform .5s;
        transition: -webkit-transform .5s;
        transition: transform .5s;
        transition: transform .5s, -webkit-transform .5s
    }

    .relative-approval-editor-tree.ant-tree.ant-tree-show-line .anticon.anticon-minus-square.ant-tree-switcher-line-icon svg {
        display: none
    }

    .relative-approval-editor-tree.ant-tree.ant-tree-show-line .anticon.anticon-plus-square.ant-tree-switcher-line-icon:after {
        font-family: iconfont-approval-admin !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: "\E646";
        line-height: 1em;
        height: 1em;
        width: 1em;
        position: absolute;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
        -webkit-transition: -webkit-transform .5s;
        transition: -webkit-transform .5s;
        transition: transform .5s;
        transition: transform .5s, -webkit-transform .5s
    }

    .relative-approval-editor-tree.ant-tree.ant-tree-show-line .anticon.anticon-plus-square.ant-tree-switcher-line-icon svg {
        display: none
    }

    .relative-approval-editor-modal .ant-modal-header {
        border-bottom: none
    }

    .relative-approval-editor-modal .ant-modal-body {
        padding-top: 0;
        padding-bottom: 0
    }

    .relative-approval-editor-modal .ant-modal-footer {
        padding: 16px 24px;
        border-top: none
    }

    .relative-approval-editor-modal .ant-btn {
        width: 100px
    }

    .leave-group-editor-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px
    }

    .leave-group-editor-title {
        color: #1f2329
    }

    .leave-group-editor-link, .leave-group-editor-title {
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px
    }

    .leave-group-editor-link {
        color: #3370ff
    }

    .leave-group-editor-table {
        margin-top: 16px
    }

    .leave-group-editor-table .ant-table {
        border-radius: 4px
    }

    .leave-group-editor-table .ant-pagination.ant-table-pagination.mini {
        display: flex;
        width: 100%
    }

    .leave-group-editor-table .ant-pagination-item {
        flex-grow: 1
    }

    .ant-table-bordered .ant-table-tbody tr > td.leave-group-editor-table-row-name, .ant-table-bordered .ant-table-thead tr > th.leave-group-editor-table-row-name {
        border-right: none;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #1f2329
    }

    .ant-table-bordered .ant-table-thead tr > th.leave-group-editor-table-row-name {
        padding: 10px 12px;
        font-weight: 400
    }

    .ant-table-bordered .ant-table-tbody tr > td.leave-group-editor-table-row-name {
        padding: 10px 12px
    }

    .ant-table-bordered .ant-table-tbody tr > td.leave-group-editor-table-row-unit, .ant-table-bordered .ant-table-thead tr > th.leave-group-editor-table-row-unit {
        padding: 10px 12px;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #1f2329;
        text-align: right
    }

    .widget-group-settings .widget-group-description {
        color: #646a73
    }

    .widget-group-settings .form-fields-config .config-title, .widget-group-settings .form-other-config .config-title {
        margin-top: 24px;
        font-weight: 500
    }

    .widget-group-settings .form-fields-config .ant-checkbox-wrapper, .widget-group-settings .form-other-config .ant-checkbox-wrapper {
        margin-top: 8px;
        display: block
    }

    .widget-group-settings .form-fields-config .config-title {
        margin-bottom: -17px
    }

    .widget-group-settings .form-fields-config .form-configurable {
        margin-top: 25px
    }

    .widget-group-settings .form-fields-config .form-configurable .config-checkbox {
        margin-left: 24px
    }

    .widget-group-settings .form-fields-config .form-configurable .config-readonly {
        margin-top: 8px;
        color: #646a73;
        margin-left: 24px
    }

    .widget-group-settings .form-other-config .ant-checkbox-wrapper {
        color: #646a73
    }

    .widget-group-settings .form-other-config .ant-checkbox-wrapper + .ant-checkbox-wrapper {
        margin-left: 0
    }

    .widget-group-settings .form-fields-config > div:not(:last-child):after {
        position: absolute;
        left: 24px;
        right: 24px;
        height: 1px;
        margin-top: 12px;
        content: "";
        background-color: #eff0f1
    }

    .config-panel {
        padding: 24px;
        height: 100%;
        overflow-y: auto
    }

    .config-panel-title {
        margin-bottom: 16px;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 18px;
        line-height: 28px;
        color: #1f2329;
        font-weight: 500
    }

    .config-panel-tabs {
        display: flex;
        margin-bottom: 24px
    }

    .config-panel-tab-item {
        flex-grow: 1;
        padding: 4px 0;
        width: 50%;
        text-align: center;
        border: 1px solid rgba(194, 197, 204, .8);
        cursor: pointer
    }

    .config-panel-tab-item:first-of-type {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px
    }

    .config-panel-tab-item:last-of-type {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px
    }

    .config-panel-tab-item-active {
        background-color: #3370ff;
        color: #fff;
        border-color: #3370ff
    }

    .drawer {
        position: relative
    }

    .drawer, .drawer-float-layer {
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        height: 100%
    }

    .drawer-float-layer {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        background-color: #fff
    }

    .drawer-visible .drawer-float-layer {
        -webkit-transform: translate(0);
        transform: translate(0)
    }

    .field-list {
        height: 100%;
        border-radius: 16px;
        background-color: #f5f6f7
    }

    .field-list-header {
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 4px;
        width: 100%;
        height: 42px;
        padding: 0 1em;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        line-height: 42px;
        text-align: center;
        font-weight: 500;
        color: #1f2329;
        background-color: #fff;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .field-list-drop-area {
        width: 100%;
        height: calc(100% - 46px);
        background-color: #f5f6f7;
        overflow-x: visible;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px
    }

    .field-list-field-list {
        padding-bottom: 140px;
        width: 100%;
        height: 100%;
        overflow-y: auto
    }

    .field-list-field-list::-webkit-scrollbar {
        width: 0 !important
    }

    .field-list-empty {
        position: relative;
        min-height: 650px;
        height: 100%;
        padding: 12px
    }

    .field-list-empty-inner {
        width: 100%;
        height: 100%;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 16px;
        line-height: 24px;
        color: #1f2329;
        border: 1px dashed #a1a5ad;
        border-radius: 2px;
        background-color: #eff0f1
    }

    .field-list-tip {
        margin-top: 144px;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #646a73;
        text-align: center
    }

    .field-list-widget-example {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: absolute;
        left: -16%;
        top: 94px;
        height: 34px;
        width: 148px;
        padding: 6px 4px 6px 8px;
        border-radius: 6px;
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .12);
        background-color: #fff
    }

    .field-list-widget-example-name {
        flex-grow: 1;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #646a73
    }

    .field-list-widget-example-icon .iconfont {
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 24px;
        line-height: 36px;
        color: #646a73
    }

    .field-list-widget-example-icon img {
        width: 100%
    }

    .field-list-arrow {
        position: absolute;
        right: -40px;
        top: 10px;
        width: 30px
    }

    .field-list-arrow img {
        width: 100%
    }

    .field-list-empty-inner-error {
        border-color: #f54a45
    }

    .field-list-empty.field-list-empty-active .field-list-empty-inner {
        border-color: #3370ff;
        border-style: solid;
        color: #3370ff
    }

    .field-list-empty.field-list-empty-dragging .field-list-arrow, .field-list-empty.field-list-empty-dragging .field-list-widget-example {
        display: none
    }

    .phone-wrapper {
        height: 100%;
        padding: 12px 12px 28px;
        box-shadow: 2px 4px 12px 0 rgba(0, 0, 0, .16), inset 0 -1px 1px 0 #c9cbd5, inset -1px 0 4px 0 rgba(57, 63, 89, .09);
        border: 1px solid #eee;
        border-radius: 24px;
        background-color: #fff
    }

    .phone-wrapper-screen {
        height: 100%;
        width: 288px;
        max-width: 300px;
        border-radius: 16px;
        border: 1px solid rgba(0, 0, 0, .1);
        background-color: #f4f5f6
    }

    .widget-type-item {
        display: flex;
        align-items: center;
        padding: 6px 4px 6px 8px;
        border: 1px solid #e4e5e7;
        border-radius: 4px;
        cursor: move;
        position: relative
    }

    .widget-type-item.new:after {
        content: "New";
        position: absolute;
        top: 0;
        right: 0;
        font-size: 12px;
        border: 1px solid #fff;
        background: #f54a45;
        color: #fff;
        line-height: 16px;
        padding: 0 4px;
        border-radius: 9px;
        -webkit-transform: translateX(50%) translateY(-50%);
        transform: translateX(50%) translateY(-50%);
        box-sizing: border-box
    }

    .widget-type-item.widget-type-item-disabled {
        opacity: .5;
        cursor: not-allowed
    }

    .widget-type-item .widget-type-item-name {
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #646a73;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: auto
    }

    .widget-type-item .widget-type-item-icon {
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 24px;
        line-height: 36px;
        color: #646a73;
        line-height: unset;
        flex: none
    }

    .type-list {
        padding: 24px;
        height: 100%;
        overflow-y: auto
    }

    .type-list-group-header {
        color: #1f2329
    }

    .type-list-group-body, .type-list-group-header {
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 8px
    }

    .type-list-group-body {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between
    }

    .type-list-group-item {
        margin-bottom: 16px;
        width: calc((100% - 16px) / 2)
    }

    .widget-type-list, .widget-type-list .ant-tabs {
        height: 100%
    }

    .widget-type-list .ant-tabs-content {
        height: calc(100% - 47px)
    }

    .widget-type-list .ant-tabs-bar.ant-tabs-top-bar {
        margin: 0
    }

    .widget-type-list .ant-tabs-nav.ant-tabs-nav-animated {
        width: 100%
    }

    .widget-type-list .ant-tabs-nav.ant-tabs-nav-animated > div:first-child {
        display: flex;
        height: 48px;
        text-align: center
    }

    .widget-type-list .ant-tabs-nav .ant-tabs-tab {
        flex-grow: 1;
        margin: 0;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 16px;
        line-height: 24px;
        color: #3370ff;
        font-weight: 400;
        width: 100%
    }

    .widget-type-list .ant-tabs-nav .ant-tabs-tab:hover {
        color: #3370ff
    }

    .widget-type-list .ant-tabs-ink-bar {
        background-color: #3370ff
    }

    .widget-type-list .widget-type-list-only-one-group {
        padding: 24px 24px 0;
        color: #8f959e
    }

    .form-design {
        position: relative;
        height: 100%;
        width: 100%;
        overflow: hidden;
        background-color: #eff0f1
    }

    .form-design-left {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        width: 360px;
        background-color: #fff
    }

    .form-design-middle {
        width: 100%;
        height: 100%;
    }

    .form-design-middle-inner {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        height: 86%;
        top: 7%
    }

    .form-design-right {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        z-index: 1
    }

    .on-boarding-hidden-tip {
        position: fixed;
        bottom: 64px;
        right: 64px;
        z-index: 100;
        padding: 14px 20px;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 16px;
        line-height: 24px;
        color: #fff;
        background-color: #3370ff;
        border-radius: 26px;
        box-shadow: 0 8px 16px -2px rgba(36, 91, 219, .3);
        cursor: pointer
    }

    .on-boarding-hidden-tip-halo {
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #3370ff;
        opacity: .7;
        border-radius: 26px;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-name: halo;
        animation-name: halo;
        -webkit-animation-duration: 1.7s;
        animation-duration: 1.7s;
        -webkit-animation-timing-function: ease-out, ease, ease;
        animation-timing-function: ease-out, ease, ease;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite
    }

    @-webkit-keyframes halo {
        0% {
            -webkit-transform: scaleX(1, 1);
            transform: scaleX(1, 1);
            opacity: .7
        }
        70% {
            -webkit-transform: scale(1.25, 1.6);
            transform: scale(1.25, 1.6);
            opacity: 0
        }
        85% {
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 0
        }
        to {
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: .7
        }
    }

    @keyframes halo {
        0% {
            -webkit-transform: scaleX(1, 1);
            transform: scaleX(1, 1);
            opacity: .7
        }
        70% {
            -webkit-transform: scale(1.25, 1.6);
            transform: scale(1.25, 1.6);
            opacity: 0
        }
        85% {
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 0
        }
        to {
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: .7
        }
    }

    .root-editor {
        position: relative;
        height: 100%
    }

    .root-editor .mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        background-color: rgba(0, 0, 0, .3)
    }

    .line-clamp {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical
    }

    .ps--active-x > .ps__rail-x, .ps--active-y > .ps__rail-y {
        z-index: 20
    }

    .flow-editor.flow-editor {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 11;
        background-color: #f0f0f2
    }

    .flow-editor.flow-editor .root-node-wrap {
        display: flex;
        padding: 50px 0 0
    }

    .flow-editor-node div {
        box-sizing: border-box
    }

    .flow-editor-node.has-error .flow-editor-node-container {
        border: 1px solid #ff5b4c;
        box-shadow: 0 0 3px 0 #ff5b4c
    }

    .flow-editor-node .icon-modal-warning {
        position: absolute;
        right: -31px;
        font-size: 23px;
        color: #ff5b4c
    }

    .flow-editor-node .flow-editor-node-container {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 200px;
        border-radius: 8px;
        overflow: hidden
    }

    .flow-editor-node .flow-editor-node-container .node-title {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        padding: 3px 13px
    }

    .flow-editor-node .flow-editor-node-container .node-title-name {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }

    .flow-editor-node .flow-editor-node-container .node-title-priority {
        flex-shrink: 0;
        margin-left: 5px
    }

    .flow-editor-node .flow-editor-node-container .node-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-grow: 1;
        margin: 0 4px 4px;
        padding: 8px;
        background: #fff;
        border-radius: 4px;
        min-height: 38px;
        font-size: 14px;
        color: #3e4759;
        cursor: pointer
    }

    .flow-editor-node .flow-editor-node-container .node-content.node-content-placeholder {
        color: #a1a5ad
    }

    .flow-editor-node .flow-editor-node-container .node-detail {
        overflow: hidden
    }

    .flow-editor-node .flow-editor-node-container .node-detail-item {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .flow-editor-node .flow-editor-node-container > .delete-btn {
        display: none;
        position: absolute;
        top: 3px;
        right: 5px;
        font-size: 7px;
        color: #fff;
        cursor: pointer
    }

    .flow-editor-node .flow-editor-node-container.read-only .delete-btn, .flow-editor-node .flow-editor-node-container.read-only .node-content, .flow-editor-node .flow-editor-node-container > .delete-btn.read-only {
        cursor: not-allowed
    }

    .flow-editor-node .flow-editor-node-container:hover > .delete-btn {
        display: block
    }

    .flow-editor-node .flow-editor-node-container .node-delete-layer {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(0, 0, 0, .7)
    }

    .flow-editor-node .flow-editor-node-container .node-delete-layer button {
        margin-right: 10px
    }

    .flow-editor-node .flow-editor-node-container .node-delete-layer button:last-child {
        margin-right: 0
    }

    .flow-editor-node .flow-editor-node-container .node-delete-layer button.node-delete-cancel {
        color: #fff;
        border-color: #fff
    }

    .flow-editor-node.approval, .flow-editor-node.condition, .flow-editor-node.end, .flow-editor-node.start {
        position: relative;
        width: 200px;
        height: 150px
    }

    .flow-editor-node.approval .flow-editor-node-container, .flow-editor-node.condition .flow-editor-node-container, .flow-editor-node.end .flow-editor-node-container, .flow-editor-node.start .flow-editor-node-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        max-height: 92px;
        z-index: 2
    }

    .flow-editor-node.approval .bottom-v-line, .flow-editor-node.condition .bottom-v-line, .flow-editor-node.end .bottom-v-line, .flow-editor-node.start .bottom-v-line {
        position: absolute;
        bottom: 0;
        left: 99px;
        height: 150px;
        width: 2px;
        background-color: #c2c5cc
    }

    .flow-editor-node.approval .add-node-btn, .flow-editor-node.condition .add-node-btn, .flow-editor-node.end .add-node-btn, .flow-editor-node.start .add-node-btn {
        position: absolute;
        bottom: 26px;
        left: 89px
    }

    .flow-editor-node.end .flow-editor-node-container, .flow-editor-node.start .flow-editor-node-container {
        background: #a9b4cd
    }

    .flow-editor-node.end .node-title, .flow-editor-node.start .node-title {
        color: #fff
    }

    .flow-editor-node.branch {
        position: relative;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        padding: 0 50px;
        min-height: 100%
    }

    .flow-editor-node.branch > .nodes {
        display: flex;
        flex-direction: column;
        align-items: center
    }

    .flow-editor-node.branch > .bottom-line-mask, .flow-editor-node.branch > .bottom-v-line, .flow-editor-node.branch > .top-line-mask, .flow-editor-node.branch > .top-v-line {
        display: none
    }

    .flow-editor-node.branch.root-branch {
        margin: 0 auto
    }

    .flow-editor-node.route .flow-editor-node.branch:first-child > .bottom-line-mask, .flow-editor-node.route .flow-editor-node.branch:first-child > .top-line-mask, .flow-editor-node.route .flow-editor-node.branch:last-child > .bottom-line-mask, .flow-editor-node.route .flow-editor-node.branch:last-child > .top-line-mask {
        display: block;
        position: absolute;
        width: 50%;
        height: 2px;
        background-color: #f0f0f2
    }

    .flow-editor-node.route .flow-editor-node.branch:first-child > .top-line-mask {
        top: -31px;
        left: 0
    }

    .flow-editor-node.route .flow-editor-node.branch:first-child > .bottom-line-mask {
        bottom: -2px;
        left: 0
    }

    .flow-editor-node.route .flow-editor-node.branch:last-child > .top-line-mask {
        top: -31px;
        right: 0
    }

    .flow-editor-node.route .flow-editor-node.branch:last-child > .bottom-line-mask {
        bottom: -2px;
        right: 0
    }

    .flow-editor-node.route .flow-editor-node.branch > .top-v-line {
        display: block;
        position: absolute;
        top: -31px;
        left: calc(50% - 1px);
        width: 2px;
        height: 31px;
        background-color: #c2c5cc
    }

    .flow-editor-node.route .flow-editor-node.branch > .bottom-v-line {
        display: block;
        width: 2px;
        background-color: #c2c5cc;
        flex-grow: 1
    }

    .flow-editor-node.normal {
        position: relative;
        width: 200px;
        height: 200px
    }

    .flow-editor-node.normal > .body {
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 100px;
        border: 1px solid;
        background-color: #f0f0f2
    }

    .flow-editor-node.normal > .body > .delete-btn {
        display: none;
        position: absolute;
        top: 5px;
        right: 5px;
        cursor: pointer
    }

    .flow-editor-node.normal > .body:hover > .delete-btn {
        display: block
    }

    .flow-editor-node.normal > .bottom-v-line {
        position: absolute;
        top: 100px;
        left: 99px;
        height: 100px;
        width: 2px;
        background-color: #c2c5cc
    }

    .flow-editor-node.normal > .add-node-btn {
        position: absolute;
        bottom: 38.5px;
        left: 88.5px
    }

    .root-node-wrap > .flow-editor-node.branch > .nodes > .flow-editor-node.normal:first-child > .body > .delete-btn {
        display: none
    }

    .add-node-btn {
        position: relative;
        width: 23px;
        height: 23px;
        border-radius: 50%
    }

    .add-node-btn.add-node-btn-active, .add-node-btn:hover {
        border: 1px solid #37f;
        box-shadow: 0 0 3px 0 #37f
    }

    .add-node-btn .add-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 4px solid #c1d6ff;
        background-color: #fff;
        color: #37f;
        outline: none;
        cursor: pointer
    }

    .add-node-btn .add-btn .add-btn-icon {
        font-size: 10px;
        font-weight: 700
    }

    .add-node-btn .add-btn.read-only {
        cursor: not-allowed
    }

    .add-node-types {
        display: flex;
        position: absolute;
        top: -4px;
        left: 38px;
        min-width: 200px;
        background-color: #fff;
        padding: 10px 30px;
        z-index: 5;
        border-radius: 8px;
        box-shadow: 0 4px 16px 0 rgba(56, 73, 69, .11)
    }

    .add-node-types:before {
        content: "";
        position: absolute;
        top: 8px;
        left: -8px;
        display: block;
        width: 0;
        height: 0;
        border-color: transparent #fff transparent transparent;
        border-style: solid;
        border-width: 8px 8px 8px 0
    }

    .add-node-types .node-type {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 35px;
        cursor: pointer
    }

    .add-node-types .node-type:last-child {
        margin-right: 0
    }

    .add-node-types .node-type-icon {
        font-size: 46px
    }

    .add-node-types .node-type-icon.icon-approval-node {
        color: #5b91fe
    }

    .add-node-types .node-type-icon.icon-condition-node {
        color: #7bddc4
    }

    .add-node-types .node-type-name {
        margin-top: -8px;
        white-space: nowrap
    }

    .flow-editor-node.route {
        display: flex;
        flex-direction: column
    }

    .flow-editor-node.route > .top-h-line {
        height: 2px;
        background-color: #c2c5cc;
        margin-top: 13px;
        margin-bottom: -15px
    }

    .flow-editor-node.route > .add-branch {
        position: relative;
        height: 28px;
        margin-bottom: 16px;
        border-radius: 14px;
        border: 1px solid transparent;
        align-self: center;
        color: #37f;
        font-size: 12px;
        cursor: pointer;
        z-index: 1
    }

    .flow-editor-node.route > .add-branch:hover {
        border: 1px solid #37f;
        box-shadow: 0 0 3px 0 #37f
    }

    .flow-editor-node.route > .add-branch.read-only {
        cursor: not-allowed
    }

    .flow-editor-node.route > .add-branch .add-branch-inner {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        padding: 0 10px;
        border: 4px solid #c1d6ff;
        border-radius: 14px;
        background-color: #fff
    }

    .flow-editor-node.route > .branches {
        display: flex;
        justify-content: center
    }

    .flow-editor-node.route > .bottom-h-line {
        height: 2px;
        background-color: #c2c5cc
    }

    .flow-editor-node.route > .bottom-v-line {
        height: 100px;
        width: 2px;
        background-color: #c2c5cc;
        align-self: center
    }

    .flow-editor-node.route > .add-node-btn {
        margin-top: -61.5px;
        margin-bottom: 38.5px;
        align-self: center
    }

    .flow-editor-node.approval {
        position: relative;
        width: 200px;
        height: 150px
    }

    .flow-editor-node.approval .node-title {
        color: #fff
    }

    .flow-editor-node.approval .node-title-name {
        min-height: 18px
    }

    .flow-editor-node.approval .flow-editor-node-container {
        background-color: #5b91fe
    }

    .flow-editor-node.approval .node-detail .node-detail-item {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical
    }

    .flow-editor-node.approval .node-detail.multiple-items .node-detail-item {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical
    }

    .flow-editor-node.approval:hover .node-title-name {
        margin-right: 8px
    }

    .root-node-wrap > .flow-editor-node.branch > .nodes > .flow-editor-node.approval:first-child > .body > .delete-btn {
        display: none
    }

    .addBtnHoverState {
        border: 1px solid #37f;
        box-shadow: 0 0 3px 0 #37f
    }

    .flow-editor-node.condition .flow-editor-node-container {
        background: #fff
    }

    .flow-editor-node.condition .node-title {
        color: #2eb795;
        padding-right: 18px;
        border-bottom: 1px solid #f6f6f7
    }

    .flow-editor-node.condition .node-title-name {
        min-height: 18px
    }

    .flow-editor-node.condition .node-detail-item {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical
    }

    .flow-editor-node.condition .delete-btn {
        color: #a1a5ad
    }

    .root-node-wrap > .flow-editor-node.branch > .nodes > .flow-editor-node.condition:first-child > .body > .delete-btn {
        display: none
    }

    .approval-editor-drawer {
        overflow: hidden;
        position: fixed;
        top: 0;
        right: -532px;
        bottom: 0;
        width: 532px;
        box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .06);
        background-color: #fff;
        -webkit-transition: -webkit-transform .5s;
        transition: -webkit-transform .5s;
        transition: transform .5s;
        transition: transform .5s, -webkit-transform .5s;
        z-index: 1000
    }

    .approval-editor-drawer.visible {
        -webkit-transform: translateX(-532px);
        transform: translateX(-532px)
    }

    .approval-editor-drawer .approval-editor-content {
        height: 100%;
        overflow: auto
    }

    .approval-editor-drawer .approval-editor-content .approval-editor-form {
        margin-bottom: 80px;
        padding: 0 16px
    }

    .approval-editor-drawer .approval-editor-name-wrapper {
        display: flex;
        align-items: baseline;
        min-height: 64px;
        padding: 18px 16px;
        border-bottom: 1px solid #e4e5e7
    }

    .approval-editor-drawer .approval-editor-name-wrapper .approval-editor-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 18px;
        font-weight: 600;
        color: #171e31
    }

    .approval-editor-drawer .approval-editor-name-wrapper .icon {
        margin-left: 9px;
        cursor: pointer
    }

    .approval-editor-drawer .approval-editor-name-wrapper .icon:hover {
        color: #37f
    }

    .approval-editor-drawer .approval-editor-node-type-wrapper {
        margin-top: 16px
    }

    .approval-editor-drawer .approval-editor-node-type-wrapper .item-key {
        color: #1f2329;
        font-weight: 600
    }

    .approval-editor-drawer .approval-editor-node-type-wrapper .item-content {
        margin: 8px 0
    }

    .approval-editor-drawer .approval-editor-node-type-wrapper .ant-radio-wrapper {
        margin-right: 32px
    }

    .approval-editor-drawer .approval-editor-tab-wrapper {
        margin-top: 24px
    }

    .approval-editor-drawer .approval-editor-tab-wrapper .item-key {
        color: #1f2329;
        font-weight: 600;
        margin-bottom: 8px
    }

    .approval-editor-drawer .approval-editor-tab-wrapper .ant-radio-group {
        display: flex;
        flex-wrap: wrap
    }

    .approval-editor-drawer .approval-editor-tab-wrapper .ant-radio-group .ant-radio-button-wrapper {
        flex: 1 1;
        display: flex;
        justify-content: center;
        align-items: center;
        height: auto;
        text-align: center;
        line-height: 20px;
        padding-top: 5px;
        padding-bottom: 5px
    }

    .approval-editor-drawer .approval-editor-tab-wrapper .ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
        color: #fff;
        background: #37f;
        border-color: #37f
    }

    .approval-editor-drawer .approval-editor-footer-wrapper {
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        height: 64px;
        border: 1px solid #ededf0;
        background-color: #fff;
        padding: 16px
    }

    .approval-editor-drawer .approval-editor-footer-wrapper .btn-group {
        display: flex;
        flex-direction: row-reverse;
        align-items: center
    }

    .approval-editor-drawer .approval-editor-footer-wrapper .btn-group .save {
        width: 100px;
        border-radius: 4px;
        background-color: #37f
    }

    .approval-editor-drawer .approval-editor-footer-wrapper .btn-group .cancel {
        width: 100px;
        margin-right: 16px;
        border-radius: 4px
    }

    .approver-editor {
        margin-bottom: 8px;
        display: flex
    }

    .approver-editor .approver-select {
        width: 100%
    }

    .approver-editor .approver-select .ant-select-selection {
        height: 36px
    }

    .approver-editor .approver-select .ant-select-selection .ant-select-selection__rendered {
        line-height: 34px
    }

    .approver-editor .approver-type {
        width: 160px;
        flex-shrink: 0
    }

    .approver-editor .approver-type > .approval-select {
        width: 100%
    }

    .approver-editor .approver-content {
        flex-grow: 1;
        margin-left: 10px
    }

    .approver-editor .approver-content .approval-select {
        width: 100%
    }

    .approver-editor .approver-content .member-select {
        padding-top: 0
    }

    .approver-editor .approver-del-icon {
        flex-grow: 0;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        margin-left: 10px;
        cursor: pointer
    }

    .approver-editor .approver-del-icon:hover {
        color: #ff5b4c
    }

    .approver-level-tooltip-container .approver-level-tooltip-inner {
        margin: 0 0 8px -12px;
        padding: 0 0 0 12px;
        font-size: 14px;
        cursor: pointer
    }

    .approver-level-tooltip-container .approver-level-tooltip-inner .icon {
        display: inline-block;
        height: 16px;
        width: 16px;
        margin-right: 4px;
        line-height: 14px;
        font-size: 12px;
        border: 1px solid #a1a5ad;
        border-radius: 50%;
        color: #a1a5ad;
        text-align: center
    }

    .approver-level-tooltip-container .approver-level-tooltip-inner {
        color: #a1a5ad
    }

    .ant-tooltip.approver-level-tooltip-overlay {
        max-width: none
    }

    .ant-tooltip.approver-level-tooltip-overlay .approver-level-tooltip-title {
        position: relative
    }

    .ant-tooltip.approver-level-tooltip-overlay .approver-level-tooltip {
        padding: 8px
    }

    .ant-tooltip.approver-level-tooltip-overlay .approver-level-tooltip img {
        width: 100%
    }

    .ant-tooltip.approver-level-tooltip-overlay .ant-tooltip-inner, .approver-level-tooltip-overlay.ant-tooltip-placement-bottom .ant-tooltip-arrow:before, .approver-level-tooltip-overlay.ant-tooltip-placement-bottomLeft .ant-tooltip-arrow:before, .approver-level-tooltip-overlay.ant-tooltip-placement-bottomRight .ant-tooltip-arrow:before, .approver-level-tooltip-overlay.ant-tooltip-placement-top .ant-tooltip-arrow:before, .approver-level-tooltip-overlay.ant-tooltip-placement-topLeft .ant-tooltip-arrow:before, .approver-level-tooltip-overlay.ant-tooltip-placement-topRight .ant-tooltip-arrow:before {
        background-color: #fff
    }

    .item-content-editor .content-wrap .approver-wrapper {
        border: 1px solid #e4e5e7;
        border-radius: 4px;
        overflow: hidden;
        margin-bottom: 12px
    }

    .item-content-editor .content-wrap .approver-wrapper .header {
        padding: 0 16px;
        background: #f5f6f7;
        height: 36px;
        line-height: 36px;
        display: flex;
        justify-content: space-between;
        align-items: center
    }

    .item-content-editor .content-wrap .approver-wrapper .header span {
        color: #1f2329;
        font-weight: 600
    }

    .item-content-editor .content-wrap .approver-wrapper .header .icon-delete-two-lines {
        color: #646a73;
        cursor: pointer
    }

    .item-content-editor .content-wrap .approver-wrapper .header .icon-delete-two-lines:hover {
        color: #3370ff;
        cursor: pointer
    }

    .item-content-editor .content-wrap .approver-wrapper .main-content .ant-radio-group {
        padding: 10px 16px
    }

    .item-content-editor .content-wrap .approver-wrapper .main-content .ant-radio-group .radio-wrapper {
        flex-basis: 31.5%;
        margin: 6px 0
    }

    .item-content-editor .content-wrap .approver-wrapper .sub-content {
        padding: 0 16px 16px
    }

    .item-content-editor .content-wrap .approver-wrapper .sub-content p {
        padding-top: 6px
    }

    .item-content-editor .content-wrap .approver-wrapper .sub-content-top-line {
        border-top: 1px solid #dee0e3;
        padding-top: 16px
    }

    .item-content-editor .content-wrap .approver-wrapper .sub-content .ant-radio-group {
        flex-direction: column
    }

    .item-content-editor .content-wrap .approver-wrapper .sub-content .ant-radio-group .ant-radio-wrapper {
        padding-top: 8px;
        margin-bottom: 0
    }

    .item-content-editor .content-wrap .approver-wrapper .sub-content .approval-select {
        width: 100%
    }

    .item-content-editor .content-wrap .approver-wrapper .sub-content .approval-select .approver-select {
        margin-top: 8px;
        width: 100%
    }

    .item-content-editor .content-wrap .approver-wrapper .sub-content .role-content {
        margin-top: 8px;
        color: #8f959e
    }

    .item-content-editor .content-wrap .approver-wrapper .sub-content .role-content a {
        color: #3370ff
    }

    .item-content-editor .content-wrap .approver-wrapper .sub-content-initiator-radio-group .ant-radio-group {
        display: flex;
        flex-direction: row
    }

    .item-content-editor .content-wrap .approver-wrapper .sub-content-initiator-radio-group .ant-radio-group .ant-radio-wrapper {
        margin-right: 32px
    }

    .item-content-editor .content-wrap .approver-wrapper .sub-content .third-content {
        margin-top: 10px
    }

    .item-content-editor .content-wrap .approver-wrapper .sub-content .third-content-error-msg {
        padding-top: 2px;
        color: #ff5b4c
    }

    .item-content-editor .content-wrap .approver-wrapper .sub-content-initator-range-title {
        margin-top: 10px
    }

    .add-approver-wrapper {
        display: flex;
        flex-wrap: wrap
    }

    .add-approver-wrapper .add-approver-icon {
        display: flex;
        align-items: center;
        width: 56px;
        height: 32px;
        border-radius: 100px;
        border: 1px solid #3370ff;
        justify-content: center;
        margin-right: 8px;
        margin-top: 8px;
        cursor: pointer
    }

    .add-approver-wrapper .add-approver-icon i {
        color: #3370ff
    }

    .add-approver-wrapper .add-approver-item {
        display: flex;
        align-items: center;
        min-width: 90px;
        max-width: 50%;
        height: 32px;
        background: #eff0f1;
        border-radius: 16px;
        padding: 0 0 0 4px;
        margin-right: 8px;
        margin-top: 8px
    }

    .add-approver-wrapper .add-approver-item img {
        width: 24px;
        height: 24px;
        border-radius: 12px
    }

    .add-approver-wrapper .add-approver-item div {
        padding: 0;
        margin: 0 4px;
        min-width: 28px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .add-approver-wrapper .add-approver-item i {
        margin-right: 10px
    }

    .add-approver-wrapper .add-approver-item .icon-close-thin {
        color: #646a73;
        cursor: pointer
    }

    .add-approver-wrapper .add-approver-item .icon-close-thin:hover {
        color: #3370ff
    }

    .add-approver-wrapper .error-msg {
        margin-top: 2px;
        line-height: 32px
    }

    .approver-tip-content {
        width: 440px
    }

    .approver-tip-content.example-tip {
        display: flex;
        flex-direction: column
    }

    .approver-tip-content.onlyone {
        width: 100%
    }

    .approver-tip-content.onlyone .content {
        margin-bottom: 0
    }

    .approver-tip-content .main-title {
        font-weight: 500;
        color: #000;
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 8px
    }

    .approver-tip-content .content {
        color: #646a73;
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 8px
    }

    .approver-tip-question-icon {
        margin-left: 5px;
        color: #8f959e
    }

    .approver-tip-content-wrapper {
        display: flex;
        min-width: 602px;
        padding: 12px
    }

    .approver-tip-content-wrapper .approver-tip-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 260px;
        margin-right: 16px
    }

    .approver-tip-content-wrapper .approver-tip-main-content {
        margin-bottom: 16px
    }

    .approver-tip-content-wrapper .example-intro-wrapper {
        display: flex;
        align-items: center
    }

    .approver-tip-content-wrapper .example-quote {
        text-align: center;
        width: 210px;
        min-height: 32px
    }

    .approver-tip-content-wrapper .example-quote.default {
        margin-bottom: 10px;
        padding: 9px 8px;
        background: #e8f5fe;
        border-radius: 16px;
        border: 1px solid rgba(0, 0, 0, .05)
    }

    .approver-tip-content-wrapper .example-quote.self {
        padding: 9px 8px;
        background: #e8f5fe;
        border-radius: 16px;
        border: 1px solid rgba(0, 0, 0, .05);
        background: #fcf1c7;
        margin-bottom: 0
    }

    .approver-tip-content-wrapper span {
        margin-left: 12px;
        color: #646a73
    }

    .approver-tip-content-wrapper span.self {
        color: #f80;
        font-weight: 500
    }

    .bold {
        color: #1f2329;
        font-weight: 600
    }

    .light-text {
        color: #8f959e;
        font-weight: 400
    }

    .item-content-editor {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none
    }

    .item-content-editor .content-wrap .item-wrap {
        position: relative;
        margin-top: 24px
    }

    .item-content-editor .content-wrap .item-wrap .item-key {
        color: #1f2329;
        font-weight: 600
    }

    .item-content-editor .content-wrap .item-wrap .item-content {
        margin-top: 10px
    }

    .item-content-editor .content-wrap .item-wrap .item-content .ant-radio-wrapper {
        margin-bottom: 4px
    }

    .item-content-editor .content-wrap .item-wrap .item-content .CustomRadio {
        flex-wrap: wrap
    }

    .item-content-editor .content-wrap .item-wrap .item-content .CustomRadio_ApproverAndOr {
        flex-direction: column;
        align-items: flex-start
    }

    .item-content-editor .content-wrap .item-wrap .item-content .CustomRadio_ApproverAndOr .ant-radio-wrapper {
        display: block;
        margin-right: 3px
    }

    .item-content-editor .content-wrap .item-wrap .item-content .add-operator {
        display: inline-block;
        line-height: 24px;
        color: #3370ff;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none
    }

    .item-content-editor .content-wrap .item-wrap .item-content .add-operator span {
        margin-left: 5px
    }

    .item-content-editor .content-wrap .item-wrap .item-content .empty-approver {
        display: flex;
        justify-content: flex-start;
        align-items: stretch
    }

    .item-content-editor .content-wrap .item-wrap .item-content .empty-approver .empty-approver-type .ant-radio-wrapper {
        margin-right: 32px
    }

    .item-content-editor .content-wrap .item-wrap .empty-approver-value {
        flex-shrink: 1;
        flex-grow: 1
    }

    .item-content-editor .content-wrap .item-wrap .empty-approver-value .approval-select {
        width: 100%
    }

    .item-content-editor .content-wrap .item-wrap .empty-approver-value .ant-select {
        width: 100%;
        margin-top: 8px
    }

    .item-content-editor .content-wrap .item-wrap .empty-approver-value .MemberSearcher {
        padding-top: 0
    }

    .item-content-editor .content-wrap .item-wrap .empty-approver-value .ant-select-selection {
        height: 36px
    }

    .item-content-editor .content-wrap .item-wrap .empty-approver-value .ant-select-selection .ant-select-selection__rendered {
        line-height: 34px
    }

    .item-content-editor .content-wrap .cc-type {
        height: 28px;
        line-height: 26px;
        border-radius: 14px;
        border: 1px solid transparent
    }

    .item-content-editor .content-wrap .more-info {
        line-height: 22px;
        color: #646a73
    }

    .item-content-editor .content-wrap .more-info p {
        position: relative;
        padding-left: 10px
    }

    .item-content-editor .content-wrap .more-info p:before {
        content: "";
        width: 4px;
        height: 4px;
        position: absolute;
        top: 9px;
        left: 0;
        border-radius: 2px;
        background: #3370ff
    }

    .item-content-editor .content-wrap .approver-self .ant-radio-group {
        display: flex
    }

    .item-content-editor .content-wrap .approver-self .item-content {
        margin-top: 4px
    }

    .item-content-editor .content-wrap .approver-self .item-content .ant-radio-wrapper {
        flex-basis: 48%;
        margin: 6px 0
    }

    .item-content-editor .content-wrap .sign-type .item-content {
        margin-top: 4px
    }

    .item-content-editor .content-wrap .sign-type .item-content .ant-radio-wrapper {
        flex-basis: 48%;
        margin: 6px 0
    }

    .item-content-editor .content-wrap .no-margin {
        margin: 0
    }

    .form-field-privilege-warpper {
        padding-top: 10px
    }

    .form-field-privilege-warpper .form-field-privilege-table {
        border: 1px solid #f0f1f2;
        color: #60758a;
        font-size: 12px;
        line-height: 18px
    }

    .form-field-privilege-warpper .form-field-privilege-table .form-field-privilege-thead {
        background-color: #fafafc
    }

    .form-field-privilege-warpper .form-field-privilege-table .form-field-privilege-tr {
        display: flex;
        width: 100%
    }

    .form-field-privilege-warpper .form-field-privilege-table .form-field-privilege-tr:not(:last-of-type) {
        border-bottom: 1px solid #f0f1f2
    }

    .form-field-privilege-warpper .form-field-privilege-table .form-field-privilege-tr .form-item-td {
        padding: 9px 0 9px 10px
    }

    .form-field-privilege-warpper .form-field-privilege-table .form-field-privilege-tr .form-item-name {
        width: 40%
    }

    .form-field-privilege-warpper .form-field-privilege-table .form-field-privilege-tr .form-cols-group {
        width: 66%;
        display: flex
    }

    .form-field-privilege-warpper .form-field-privilege-table .form-field-privilege-tr .readable, .form-field-privilege-warpper .form-field-privilege-table .form-field-privilege-tr .writable {
        display: flex;
        width: 40%
    }

    .form-field-privilege-warpper .form-field-privilege-table .form-field-privilege-tr .title-name {
        width: 40%
    }

    .form-field-privilege-warpper .form-field-privilege-table .form-field-privilege-tr .form-field-privilege-rows-group {
        width: 75%
    }

    .form-field-privilege-warpper .form-field-privilege-table .form-field-privilege-tr.col-4 .form-item-name {
        width: 25%
    }

    .form-field-privilege-warpper .form-field-privilege-table .form-field-privilege-tr.col-4 .form-cols-group {
        width: 75%
    }

    .form-field-privilege-tooltip-wrapper {
        position: relative
    }

    .form-field-privilege-tooltip-wrapper .form-field-privilege-tooltip-trigger {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 5
    }

    .form-action-permission-wrapper {
        padding: 10px 0
    }

    .form-action-permission-wrapper tr {
        height: 44px
    }

    .form-action-permission-wrapper tr .form-action-permission-normal-font {
        line-height: 22px;
        font-size: 14px;
        color: #141f33
    }

    .form-action-permission-wrapper td {
        padding: 0 8px 0 0
    }

    .node-custom-id {
        display: flex;
        align-items: flex-start;
        margin-top: 18px
    }

    .node-custom-id .ant-form-item-control-wrapper {
        flex-grow: 1
    }

    .condition-header-wrap {
        display: flex;
        align-items: center;
        margin-bottom: 24px
    }

    .condition-header-wrap .condition-name-box {
        color: #171e31;
        font-size: 30px;
        font-weight: 700;
        flex: auto;
        min-width: 1px;
        margin-right: 10px;
        display: flex;
        align-items: baseline
    }

    .condition-header-wrap .condition-tip {
        display: inline-flex;
        align-items: baseline;
        width: 100%
    }

    .condition-header-wrap .condition-name {
        margin-right: 4px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }

    .condition-header-wrap .edit-icon {
        width: 24px;
        height: 24px;
        color: #a1a5ad;
        font-size: 14px;
        text-align: center
    }

    .condition-header-wrap .edit-icon:hover {
        color: #37f;
        cursor: pointer
    }

    .condition-header-wrap .priority-select {
        width: 120px;
        height: 36px
    }

    .condition-group-select {
        width: 100%
    }

    .condition-group-select .ant-select-selection {
        border-radius: 4px;
        color: #171e31
    }

    .approval-select .icon-dropdown.icon-dropdown {
        color: #646a73;
        vertical-align: top
    }

    .condition-form-item {
        margin-bottom: 0;
        width: 100%
    }

    .condition-form-item .ant-form-item-control {
        line-height: normal
    }

    .condition-form-item .condition-value {
        margin-top: 8px
    }

    .condition-form-item .condition-value .value-select:first-of-type {
        margin-top: auto
    }

    .condition-form-item .value-select {
        width: 100%
    }

    .condition-form-item .value-input {
        height: 32px
    }

    .condition-form-item .value-input, .condition-form-item .value-select {
        margin-top: 8px
    }

    .condition-form-item .value-input input.ant-input, .condition-form-item .value-select input.ant-input {
        color: #1f2329;
        border-color: #e4e5e7
    }

    .condition-form-item .compare-value, .condition-form-item .unit {
        margin: 0 10px;
        display: flex;
        align-items: center
    }

    .condition-form-item .applicant-btn {
        height: 32px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        padding: 0 11px;
        color: #1f2329;
        border-color: #e4e5e7
    }

    .condition-form-item .applicant-btn:hover {
        color: #1f2329;
        border-color: #e4e5e7
    }

    .condition-form-item .applicant-btn .applicant-btn-content {
        flex: auto;
        text-align: left;
        overflow: hidden;
        display: flex
    }

    .condition-form-item .applicant-btn .applicant-btn-content .tip {
        overflow: hidden;
        text-overflow: ellipsis
    }

    .condition-form-item .applicant-btn .applicant-btn-name {
        flex: none;
        color: #37f;
        display: flex;
        align-items: center
    }

    .condition-form-item .applicant-btn .applicant-btn-name .icon-department {
        font-size: 22px;
        line-height: 1
    }

    .condition-form-item .condition-address-value {
        flex: auto;
        display: flex;
        padding: 0 6px;
        height: 32px;
        line-height: 32px;
        border-radius: 4px;
        border: 1px solid #e4e5e7;
        cursor: pointer;
        overflow: hidden;
        color: #1f2329
    }

    .condition-form-item .condition-address-value-text {
        flex: auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .condition-form-item .condition-address-value-suffix {
        flex: none;
        padding: 0 10px;
        font-size: 14px;
        color: #3686ff;
        cursor: pointer
    }

    .condition-form-item .has-error .applicant-btn, .condition-form-item .has-error .condition-address-value, .condition-form-item .has-error .multiple-value-select, .condition-form-item .has-error .single-value-select, .condition-form-item .has-error .value-select {
        border: 1px solid #ff5b4c;
        border-radius: 4px
    }

    .condition-form-item .ant-select-arrow {
        color: rgba(0, 0, 0, .25)
    }

    .condition-form-item .ant-select-selection--multiple {
        min-height: 32px
    }

    .condition-form-item .condition-value-unit {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative
    }

    .condition-form-item .condition-value-unit .value-input {
        width: 50%
    }

    .condition-form-item .condition-value-unit .value-select {
        width: 40%;
        margin-right: 2em
    }

    .condition-form-item .condition-value-out-unit {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative
    }

    .condition-form-item .condition-value-out-unit .value-input {
        width: 56%
    }

    .condition-form-item .condition-value-out-unit .value-select {
        width: 40%
    }

    .condition-form-item i.anticon-question-circle {
        position: absolute;
        right: 0;
        z-index: 1;
        margin-top: 4px
    }

    .condition-form-item.condition-value-unit-popover {
        max-width: 360px
    }

    .condition-form-item.condition-value-unit-popover .tip-img {
        width: 280px;
        margin-top: 1em
    }

    .condition-form-item.condition-value-unit-popover .tip-img img {
        width: 100%
    }

    .condition-form-item.condition-value-unit-popover .ant-tooltip-arrow {
        border-bottom-color: rgba(255, 254, 254, .75)
    }

    .condition-form-item.condition-value-unit-popover .ant-tooltip-inner {
        background-color: #fff;
        color: #9ca2a9;
        padding: 1em;
        box-shadow: 0 0 8px 4px rgba(0, 0, 0, .15)
    }

    .condition-form-item .tip {
        color: #a1a5ad
    }

    .condition-form-item .compare-select + .applicant-btn {
        margin-top: 8px
    }

    .condition-group-editor {
        border-radius: 4px;
        border: 1px solid #e4e5e7;
        position: relative
    }

    .condition-group-editor .del-icon {
        color: #a1a5ad;
        cursor: pointer;
        line-height: 36px
    }

    .condition-group-editor .del-icon:hover {
        color: #ff5b4c
    }

    .condition-group-editor .group-header {
        background-color: #f4f6f8;
        padding: 0 12px;
        line-height: 36px;
        height: 36px;
        font-size: 14px;
        color: #171e31
    }

    .condition-group-editor .group-header .group-del-icon {
        position: absolute;
        right: 12px
    }

    .condition-group-editor .group-content {
        padding: 0 12px
    }

    .condition-group-editor .group-content .condition-item {
        display: flex;
        position: relative;
        min-height: 36px;
        flex-flow: column wrap
    }

    .condition-group-editor .group-content .condition-relation {
        height: 36px;
        margin-right: 10px;
        color: #9ca2a9;
        display: flex;
        align-items: center
    }

    .condition-group-editor .group-content .ant-select-selection {
        border-color: #ededf0;
        color: #1f2329
    }

    .condition-group-editor .group-content .condition-del-icon {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%
    }

    .condition-group-editor .group-footer {
        padding: 12px;
        font-size: 14px;
        line-height: 24px;
        color: #37f
    }

    .condition-group-editor .group-footer .condition-add {
        cursor: pointer
    }

    .condition-editor-drawer {
        position: fixed;
        top: 0;
        right: -500px;
        width: 500px;
        height: 100%;
        overflow: hidden;
        border-radius: 4px;
        box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .06);
        background-color: #fff;
        -webkit-transition: -webkit-transform .5s;
        transition: -webkit-transform .5s;
        transition: transform .5s;
        transition: transform .5s, -webkit-transform .5s;
        padding: 24px;
        z-index: 1000
    }

    .condition-editor-drawer.visible {
        -webkit-transform: translateX(-500px);
        transform: translateX(-500px)
    }

    .condition-editor-drawer .condition-editor-form {
        height: calc(100% - 64px);
        overflow-y: auto
    }

    .condition-editor-drawer .operate {
        margin-top: 24px
    }

    .condition-editor-drawer .operate .add-operator {
        font-size: 14px;
        line-height: 24px;
        color: #37f;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        display: inline-block
    }

    .condition-editor-drawer .operate .add-operator.disable {
        cursor: not-allowed;
        color: #7f838b
    }

    .condition-editor-drawer .operate .plus-icon {
        font-size: 12px;
        margin-right: 5px;
        vertical-align: middle
    }

    .condition-editor-drawer .operate .tip {
        vertical-align: middle
    }

    .condition-editor-drawer .group-or {
        margin: 10px 0
    }

    .condition-editor-drawer .footer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 64px;
        border-top: 1px solid #ededf0;
        display: flex;
        align-items: center;
        padding: 16px 24px;
        background-color: #fff
    }

    .condition-editor-drawer .footer .link {
        flex: auto;
        color: #37f
    }

    .condition-editor-drawer .footer .link:hover {
        cursor: pointer
    }

    .condition-editor-drawer .footer .btn {
        flex: none;
        width: 100px
    }

    .condition-editor-drawer .footer .cancel {
        color: #666
    }

    .condition-editor-drawer .footer .confirm {
        margin-left: 16px;
        background-color: #37f
    }

    .validate-error-list-trigger .validate-error-list-tip {
        color: #f54a45;
        cursor: pointer
    }

    .validate-error-list-overlay {
        width: 350px
    }

    .validate-error-list-overlay .validate-error-list-overlay-title {
        margin-bottom: 12px;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 16px;
        line-height: 24px;
        color: #1f2329
    }

    .validate-error-list-overlay .validate-error-list-overlay-sub-title {
        margin-bottom: 16px;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #8f959e
    }

    .validate-error-list-overlay .validate-error-list-overlay-error-list {
        height: 180px;
        overflow: auto
    }

    .validate-error-list-overlay .validate-error-list-overlay-error-item {
        display: flex;
        justify-content: space-between;
        padding: 12px;
        margin-bottom: 10px;
        background-color: #f5f6f7
    }

    .validate-error-list-overlay .validate-error-list-overlay-error-item-tab {
        flex-shrink: 0;
        margin-right: 8px;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #1f2329
    }

    .validate-error-list-overlay .validate-error-list-overlay-error-item-msg {
        flex-grow: 1;
        margin-right: 8px;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        width: 100%;
        color: #8f959e;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .validate-error-list-overlay .validate-error-list-overlay-error-item-link {
        flex-shrink: 0;
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 14px;
        line-height: 20px;
        color: #3370ff;
        cursor: pointer
    }

    .create-approval-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 64px;
        z-index: 2;
        position: relative;
        box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .06)
    }

    .create-approval-header-left {
        left: 24px
    }

    .create-approval-header-left, .create-approval-header-right {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: absolute;
        height: 100%
    }

    .create-approval-header-right {
        right: 24px
    }

    .create-approval-header-back-btn {
        flex: none;
        cursor: pointer;
        font-size: 24px;
        padding: 0 10px;
        color: #1f2329
    }

    .create-approval-header-tab-list {
        flex-grow: 1;
        display: flex;
        justify-content: center
    }

    .create-approval-header-tab-item {
        font-family: PingFang SC, Microsoft YaHei;
        font-size: 18px;
        line-height: 28px;
        color: #646a73;
        margin-right: 64px;
        padding: 18px 0;
        border-bottom: 2px solid transparent;
        cursor: pointer
    }

    .create-approval-header-tab-item:last-of-type {
        margin-right: 0
    }

    .create-approval-header-tab-item.create-approval-header-tab-item-active {
        border-bottom-color: #3370ff;
        color: #3370ff;
        font-weight: 500
    }

    .create-approval-header-tab-counter {
        display: inline-block;
        margin-right: 6px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: 1px solid #646a73;
        font-size: 16px;
        line-height: 22px;
        text-align: center
    }

    .create-approval-header-tab-item.create-approval-header-tab-item-active .create-approval-header-tab-counter {
        border-color: #3370ff;
        background-color: #3370ff;
        color: #fff;
        font-weight: 400
    }

    .create-approval-header-error-list-wrapper {
        margin-right: 46px
    }

    .create-approval-header-preview-btn {
        margin-right: 16px;
        min-width: 76px
    }

    .create-approval-header-preview-btn, .create-approval-header-preview-btn.ant-btn-loading, .create-approval-header-preview-btn:focus, .create-approval-header-preview-btn:hover {
        border-color: #3370ff;
        color: #3370ff
    }

    .create-approval-header-preview-btn.ant-btn-loading {
        border-color: #82a7fc;
        padding-left: 15px !important
    }

    .create-approval-header-preview-btn.ant-btn-loading:before {
        display: none
    }

    .create-approval-header-preview-btn.ant-btn-loading > :not(.anticon) {
        opacity: 0;
        margin-left: 0
    }

    .create-approval-header-preview-btn.ant-btn-loading > .anticon {
        margin-left: 0 !important;
        display: flex;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%)
    }

    .create-approval-header-release-btn {
        flex: none;
        min-width: 76px;
        background-color: #3370ff;
        border-color: #3370ff
    }

    .approval-preview .ant-modal-close {
        display: none
    }

    .approval-preview .ant-modal {
        width: 400px !important
    }

    .approval-preview .ant-modal .ant-modal-body {
        padding: 0
    }

    .approval-preview .close-button {
        position: absolute;
        top: 16px;
        right: 16px;
        height: 24px;
        width: 24px;
        display: flex;
        justify-content: center;
        cursor: pointer;
        overflow: hidden
    }

    .approval-preview .close-button .close {
        color: #2b2f36;
        -webkit-transform: scale(1.5);
        transform: scale(1.5)
    }

    .approval-preview .qr-code {
        width: 200px;
        height: 200px;
        padding: 40px 100px 0;
        box-sizing: initial
    }

    .approval-preview .qr-code img {
        width: 200px;
        height: 200px;
        object-fit: contain
    }

    .approval-preview-title {
        margin-top: 16px;
        padding: 0 24px;
        color: #1f2329;
        font-weight: 500;
        font-size: 18px;
        text-align: center
    }

    .approval-preview-description {
        margin-top: 8px;
        padding: 0 24px 32px;
        color: #646a73;
        font-weight: 400;
        font-size: 14px;
        text-align: center
    }

    .approval-preview-description:not(:last-child) {
        padding-bottom: 16px
    }

    .approval-preview-warning {
        background-color: #f80;
        color: #fff;
        font-size: 14px;
        line-height: 22px;
        padding: 12px 18px;
        border-radius: 0 0 4px 4px
    }

    .create-approval-spin {
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        background-color: rgba(0, 0, 0, .2)
    }

    .create-approval-spin .ant-spin .ant-spin-dot-item {
        background-color: #3370ff
    }

    .create-approval {
        height: 100%;
        min-width: 1200px;
        min-height: 600px
    }

    .create-approval-main {
        height: calc(100% - 64px)
    }

    .DateRange {
        display: flex;
        justify-items: space-between;
        align-items: center
    }

    .DateRange_hyphen {
        padding: 0 8px;
        font-size: 14px;
        line-height: 22px;
        color: #757575
    }

    .DateRange_picker {
        flex-grow: 1
    }

    .DateRange .iconfont-approval-admin .icon-triangle-down:hover {
        color: #4575f6
    }

    .WrappedPagination .ant-pagination {
        text-align: center
    }

    .WrappedPagination .ant-pagination-item, .WrappedPagination .ant-pagination-next, .WrappedPagination .ant-pagination-prev {
        min-width: 28px;
        height: 28px;
        line-height: 28px
    }

    .WrappedPagination .ant-pagination-total-text {
        height: 28px;
        line-height: 28px
    }

    .WrappedPagination .ant-pagination-options, .WrappedPagination .ant-pagination-options .ant-select-selection--single {
        height: 28px
    }

    .WrappedPagination .ant-pagination-options .ant-select-selection--single .ant-select-selection__rendered {
        height: 28px;
        line-height: 28px
    }

    .WrappedPagination .ant-select-selection-selected-value {
        height: 28px
    }

    .DataQuery {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        width: 100%;
        height: 100%
    }

    .DataQuery_nav {
        flex-shrink: 0;
        width: 1000px;
        margin-bottom: 32px
    }

    .DataQuery_nav .ant-menu .ant-menu-item {
        padding: 0;
        margin-right: 53px
    }

    .DataQuery_scroll {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        overflow-y: auto
    }

    .DataQuery_filter {
        flex-shrink: 0;
        width: 1000px
    }

    .DataQuery .ant-input, .DataQuery .ant-select-selection--single {
        height: 36px
    }

    .DataQuery .ant-select-selection__rendered {
        line-height: 34px
    }

    .DataQuery .ant-form-item-label {
        text-align: left
    }

    .DataQuery .ant-form-item-label label {
        position: relative;
        text-align: left;
        padding-left: 12px;
        color: #757575
    }

    .DataQuery .ant-form-item-label .ant-form-item-required:before {
        position: absolute;
        top: 0;
        left: 0
    }

    .DataQuery .ant-select-selection-selected-value {
        color: #212121
    }

    .DataQuery .ant-input::-webkit-input-placeholder {
        color: #ccc
    }

    .DataQuery .ant-input::-moz-placeholder {
        color: #ccc
    }

    .DataQuery .ant-input::-ms-input-placeholder {
        color: #ccc
    }

    .DataQuery .ant-input::placeholder {
        color: #ccc
    }

    .DataQuery .ant-form-item {
        margin-bottom: 20px
    }

    .DateQuery_tableHeader {
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 44px 0 12px;
        width: 1000px
    }

    .DateQuery_exportButtonWrapper .ant-btn {
        border-color: #4575f6;
        color: #4575f6
    }

    .DataQuery_table {
        flex-grow: 1;
        width: 1000px;
        margin-bottom: 18px
    }

    .DataQuery_table .ant-table {
        border: 1px solid #ededf0;
        border-radius: 4px
    }

    .DataQuery_table .ant-table .ant-table-thead > tr > th {
        padding: 0 16px;
        height: 36px;
        font-size: 12px;
        line-height: 17px;
        color: #7e838c;
        background-color: #ededf0
    }

    .DataQuery_table .ant-table .ant-table-tbody > tr > td {
        padding: 26px 0 26px 16px;
        color: #7e838c
    }

    .DataQuery .ant-table-placeholder {
        padding: 32px
    }

    .DataQuery .ant-table-placeholder .ant-empty-normal {
        margin: 0
    }

    .DataQuery .ant-table-placeholder .ant-empty-image {
        display: none
    }

    .DataQuery .ant-table-thead > tr:first-child > th:first-child, .DataQuery .ant-table-thead > tr:first-child > th:last-child {
        border-radius: 0
    }

    .DataQuery .ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td {
        background: #f6f6f7
    }

    .DataQuery_tableApplicant {
        position: relative;
        padding-left: 48px
    }

    .DataQuery_tableApplicantAvatar {
        position: absolute;
        top: 50%;
        margin-top: -16px;
        left: 0;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        overflow: hidden
    }

    .DataQuery_tableApplicantAvatar img {
        width: 100%;
        height: 100%
    }

    .DataQuery_tableApprovalName {
        font-size: 14px;
        line-height: 1.57;
        color: #141f33
    }

    .DataQuery_table-status {
        font-size: 10px;
        line-height: 14px;
        padding: 0 5px;
        border-radius: 1px
    }

    .DataQuery_table-status.pending {
        color: #f3b142;
        background-color: rgba(243, 177, 66, .12)
    }

    .DataQuery_table-status.agreed {
        color: #29cca3;
        background-color: rgba(41, 204, 163, .12)
    }

    .DataQuery_table-status.rejected {
        color: #ff5b4c;
        background-color: rgba(255, 91, 76, .12)
    }

    .DataQuery_table-status.withdrawed {
        color: #7f838b;
        background-color: rgba(127, 131, 139, .12)
    }

    .DataQuery_pagination {
        flex-shrink: 0;
        width: 1000px;
        margin-bottom: 32px
    }

    .DataQuery_pagination .ant-pagination {
        text-align: center
    }

    .ExportStartModal.ant-modal-confirm .ant-modal-body {
        padding: 28px
    }

    .select-option-tag {
        margin-left: 3px
    }

    .ExportHistory {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        height: 100%
    }

    .ExportHistory_nav {
        flex-shrink: 0;
        width: 1000px;
        margin-bottom: 32px
    }

    .ExportHistory_table {
        flex-grow: 1;
        width: 1000px;
        height: 100px;
        margin-bottom: 24px
    }

    .ExportHistory_table .ant-table {
        border: 1px solid #ededf0;
        border-radius: 4px
    }

    .ExportHistory_table .ant-table .ant-table-thead > tr > th {
        padding: 0 16px;
        height: 32px;
        font-size: 12px;
        color: #7e838c;
        background-color: #ededf0
    }

    .ExportHistory_table .ant-table .ant-table-tbody > tr > td {
        font-size: 14px;
        line-height: 22px;
        color: #7e838c
    }

    .ExportHistory_table .ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td {
        background: #f6f6f7
    }

    .ExportHistory_table .ant-table .ant-table-selection-column .ant-checkbox-indeterminate .ant-checkbox-inner:after, .ExportHistory_table .ant-table .ant-table-selection-column .ant-checkbox-inner {
        border-radius: 50%
    }

    .ExportHistory_table .ant-empty-normal {
        margin: 0
    }

    .ExportHistory_table .ant-empty-image {
        display: none
    }

    .ExportHistory_table .ExportHistory_failure {
        color: #ec6755;
        cursor: pointer
    }

    .ExportHistory_tableDarkColor {
        color: #141f33
    }

    .ExportHistory_tableRightAlign {
        text-align: right
    }

    .ExportHistory_pagination {
        flex-shrink: 0;
        margin-bottom: 32px;
        width: 1000px
    }

    .SiderMenu {
        height: 100%;
        background-color: #f6f6f7
    }

    .SiderMenu .ant-menu {
        padding-top: 8px;
        background-color: initial
    }

    .SiderMenu .ant-menu .ant-menu-item {
        height: 56px;
        line-height: 56px;
        border-left: 4px solid transparent;
        background-color: initial
    }

    .SiderMenu .ant-menu .ant-menu-item-selected > a, .SiderMenu .ant-menu .ant-menu-item-selected > a:hover, .SiderMenu .ant-menu .ant-menu-item:hover > a {
        color: #4575f6
    }

    .SiderMenu .ant-menu .ant-menu-item-selected {
        background-color: rgba(69, 117, 246, .1);
        border-left-color: #4575f6
    }

    .MainLayout {
        height: 100%
    }

    .MainLayout .ant-layout-header {
        z-index: 1;
        padding: 0 20px 0 0;
        box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .04)
    }

    .DataQueryNav .ant-menu .ant-menu-item {
        padding: 0;
        margin-right: 53px;
        font-weight: 500
    }

    .DataQueryNav .ant-menu-horizontal > .ant-menu-item > a {
        color: #141f33
    }

    .DataQueryNav .ant-menu-horizontal > .ant-menu-item:hover {
        border-bottom-color: transparent
    }

    .DataQueryNav .ant-menu-horizontal > .ant-menu-item > a:hover {
        color: #4575f6
    }

    .DataQueryNav .ant-menu-horizontal > .ant-menu-item-selected {
        border-bottom-color: #4575f6
    }

    .DataQueryNav .ant-menu-horizontal > .ant-menu-item-selected > a {
        color: #4575f6
    }

    .DataQueryNav .ant-menu-horizontal > .ant-menu-item-selected:hover {
        border-bottom-color: #4575f6
    }

    .DataExport {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        height: 100%
    }

    .DataExport_nav {
        flex-shrink: 0;
        margin-bottom: 32px;
        width: 1000px
    }

    .DataExport_content {
        flex-grow: 1;
        width: 100%;
        height: calc(100% - 80px);
        overflow-y: auto
    }

    .LeaveManagementNav {
        margin: -10px 0 31px;
        flex-shrink: 0
    }

    .LeaveManagementNav .ant-menu-horizontal > .ant-menu-item {
        padding: 0;
        margin-right: 53px;
        font-weight: 500
    }

    .LeaveManagementNav .ant-menu-horizontal > .ant-menu-item:hover {
        border-bottom-color: transparent
    }

    .LeaveManagementNav .ant-menu-horizontal > .ant-menu-item a {
        color: #141f33
    }

    .LeaveManagementNav .ant-menu-horizontal > .ant-menu-item a:hover {
        color: #4575f6
    }

    .LeaveManagementNav .ant-menu-horizontal > .ant-menu-item-selected, .LeaveManagementNav .ant-menu-horizontal > .ant-menu-item-selected:hover {
        border-bottom-color: #4575f6
    }

    .LeaveManagementNav .ant-menu-horizontal > .ant-menu-item-selected > a {
        color: #4575f6
    }

    .icon-button {
        position: relative;
        border: none;
        padding: 0;
        color: #000;
        width: 20px;
        height: 20px;
        line-height: 20px;
        vertical-align: middle;
        cursor: pointer
    }

    .icon-button.disabled {
        opacity: .5;
        cursor: not-allowed
    }

    .icon-button:focus {
        outline: none
    }

    .icon-button:hover:not(.disabled) .tip {
        display: block
    }

    .LeaveTypeTable {
        margin: 20px 0 40px
    }

    .LeaveTypeTable .ant-table {
        border-left: 1px solid #ededf0;
        border-right: 1px solid #ededf0;
        border-radius: 4px
    }

    .LeaveTypeTable .ant-table .ant-table-thead > tr > th {
        padding: 0 0 0 24px;
        height: 36px;
        font-size: 12px;
        line-height: 36px;
        color: #7e838c;
        background-color: #ededf0
    }

    .LeaveTypeTable .ant-table .ant-table-tbody > tr > td {
        padding: 0 0 0 24px;
        height: 62px;
        line-height: 62px;
        color: #141f33;
        border-bottom: 1px solid #ededf0;
        background-color: #fff
    }

    .LeaveTypeTable .ant-table .ant-table-tbody > tr > td:last-child {
        width: 140px
    }

    .LeaveTypeTable .ant-table .ant-table-tbody > tr > td .icon-button {
        margin-right: 16px;
        background-color: initial
    }

    .LeaveTypeTable .ant-table .ant-table-tbody > tr:hover > td {
        background-color: #fff
    }

    .LeaveTypeTable .ant-table .ant-table-tbody > tr.disabled > td {
        background-color: #f6f6f6;
        color: #a1a5ad
    }

    .LeaveTypeTable .ant-table-placeholder {
        padding: 150px 0
    }

    .LeaveTypeTable .LeaveType_Name {
        display: block;
        max-width: 400px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .selector-select {
        margin-bottom: 14px;
        height: 32px;
        line-height: 32px;
        width: 100%;
        border-radius: 4px;
        border: 1px solid #e4e5e7;
        display: inline-block;
        padding: 0 10px;
        position: relative
    }

    .selector-select .clear-btn {
        opacity: .4
    }

    .selector-select--disabled {
        cursor: not-allowed;
        background-color: rgba(0, 0, 0, .05)
    }

    .selector-select--selected, .selector-select:hover {
        border: 1px solid #1890ff
    }

    .selector-select--disabled:hover {
        border: 1px solid #d9d9d9
    }

    .selector-select__input {
        display: flex
    }

    .selector-select__input .selector-select__value {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1 1
    }

    .selector-select__input .selector-select__icon {
        -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
        transition: all .3s cubic-bezier(.645, .045, .355, 1)
    }

    .selector-select__input .selector-select__icon--show {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }

    .selector-select__input .selector-select__placeholder {
        color: #1f2329;
        font-weight: 500
    }

    .selector-select__opt {
        height: 300px;
        overflow: scroll;
        width: 200%;
        padding: 0 20px;
        background-color: #fff;
        border: 1px solid #e6e6e6;
        border-radius: 8px;
        z-index: 999;
        position: absolute;
        left: 0
    }

    .selector-select__opt--top {
        top: -308px
    }

    .selector-select__opt--bottom {
        top: 32px
    }

    .selector-select__opt .wrap-list .wrap-item {
        padding-left: 12px;
        display: flex
    }

    .selector-select__opt .wrap-list .wrap-item .main-list__index {
        margin-bottom: 12px;
        width: 18px;
        color: #9e9e9e
    }

    .selector-select__opt .wrap-list .wrap-item .main-list {
        flex: 1 1
    }

    .selector-select__opt .wrap-list .wrap-item .main-list .main-item {
        padding-left: 24px;
        margin-bottom: 12px
    }

    .selector-select__opt .wrap-list .wrap-item .main-list .main-item:hover {
        color: #40a9ff
    }

    .selector-select__opt .wrap-list .wrap-item .main-list .main-item--selected {
        color: #1890ff
    }

    .group-board-alert {
        margin-top: 12px;
        font-size: 14px;
        color: #646a73;
        line-height: 1.5
    }

    .group-board__search {
        margin-top: 8px
    }

    .group-board__search .ant-input-suffix {
        opacity: .4
    }

    .group-board .result-list {
        margin-top: 8px
    }

    .group-board .result-list .result-item {
        margin-left: -10px;
        padding: 0 6px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 32px
    }

    .group-board .result-list .result-item .result-item__icon {
        margin-right: 6px
    }

    .group-board .result-list .result-item:hover {
        background-color: #efefef
    }

    .group-board .result-list .result-item__name {
        margin-left: 6px
    }

    .group-board .ant-tree-title {
        display: inline-block;
        width: 245px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .group-board .ant-tree.ant-tree-show-line.hide-file-icon li span.ant-tree-switcher-noop {
        background: transparent
    }

    .group-board .ant-tree-switcher .anticon {
        pointer-events: none
    }

    .group-board .ant-tree.ant-tree-show-line.hide-file-icon li:before {
        content: " ";
        width: 1px;
        border-left: 1px solid #d9d9d9;
        height: 100%;
        position: absolute;
        left: 12px;
        top: 0;
        margin: 0
    }

    .group-board .ant-tree.ant-tree-show-line.hide-file-icon li:first-child:before {
        top: 6px;
        height: calc(100% - 6px)
    }

    .group-board .ant-tree.ant-tree-show-line.hide-file-icon li:last-child:before {
        height: 16px
    }

    .group-board .ant-tree.ant-tree-show-line.hide-file-icon li:first-child:last-child:before {
        height: 10px
    }

    .group-board .ant-tree.ant-tree-show-line.hide-file-icon li .ant-tree-switcher-noop > i {
        visibility: hidden
    }

    .group-board .ant-tree-treenode-switcher-open:before {
        z-index: -1 !important
    }

    .group-board .ant-tree-node-content-wrapper {
        margin-left: -6px !important
    }

    .group-board .ant-tree-iconEle {
        display: none !important
    }

    .group-board .ant-tree-node-content-wrapper-normal {
        margin-left: -28px !important;
        z-index: 9999 !important;
        background-color: #fff !important
    }

    .group-board .ant-tree-node-content-wrapper-normal .ant-tree-iconEle {
        display: inline-block !important
    }

    .ant-modal.custom-modal .leave-balance-editor {
        display: flex;
        align-items: center
    }

    .ant-modal.custom-modal .leave-balance-editor .balance-input {
        flex: auto
    }

    .ant-modal.custom-modal .leave-balance-expire {
        color: #8f959e
    }

    .ant-modal.custom-modal .set-work-time-data-picker {
        width: 100%
    }

    .ant-tooltip.no-wrap {
        max-width: unset
    }

    .ant-tooltip.no-wrap .ant-tooltip-inner {
        white-space: nowrap
    }

    .employee-leave-balance__page {
        padding-bottom: 200px
    }

    .employee-leave-balance__page .approval-select {
        width: 100%
    }

    .employee-leave-balance__page .header__btn-group {
        display: flex;
        justify-content: flex-end
    }

    .employee-leave-balance__page .guide-arrow-right {
        margin: 10px
    }

    .employee-leave-balance__page .header__btn {
        margin-left: 12px
    }

    .employee-leave-balance__page .header__btn .export-btn-span, .employee-leave-balance__page .header__btn .import-btn-span {
        margin-left: 6px
    }

    .employee-leave-balance__page .header__selector {
        position: relative
    }

    .employee-leave-balance__page .header__selector .header__selector-hack {
        position: absolute;
        top: 6px;
        left: 18px;
        right: 0;
        bottom: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .employee-leave-balance__page .header__selector .header__selector-hack .hack-placeholder {
        color: #1f2329
    }

    .employee-leave-balance__page .header__selector .header__selector-hack .hack-value {
        display: inline-block !important;
        max-width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .employee-leave-balance__page .footer {
        margin-top: 24px;
        text-align: center
    }

    .employee-leave-balance__page ::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 1px;
        height: 10px
    }

    .employee-leave-balance__page ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset006px #a2a5ac;
        border-radius: 10px
    }

    .employee-leave-balance__page ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: #a2a5ac;
        -webkit-box-shadow: 0 0 1px #a2a5ac
    }

    .employee-leave-balance__page .ant-input-suffix {
        opacity: .4
    }

    .employee-leave-balance__page .ant-select {
        width: 100%
    }

    .employee-leave-balance__page .ant-tree {
        color: #18263c
    }

    .employee-leave-balance__page .ant-table {
        border: 1px solid #e4e5e7;
        border-bottom: none;
        border-radius: 4px
    }

    .employee-leave-balance__page .ant-table a {
        color: #1f2329
    }

    .employee-leave-balance__page .ant-table a:hover {
        color: #3370ff
    }

    .employee-leave-balance__page .ant-table .ant-table-fixed-left .ant-table-thead tr {
        height: auto !important
    }

    .employee-leave-balance__page .ant-table .ant-table-thead > tr > th {
        padding: 5px 16px;
        font-size: 14px;
        color: #646a73;
        background-color: #f5f6f7
    }

    .employee-leave-balance__page .ant-table .ant-table-tbody > tr > td {
        color: #1f2329;
        border-color: #e4e5e7;
        padding: 22px 4px
    }

    .employee-leave-balance__page .ant-table .ant-table-tbody > tr > td .exclude-tip {
        margin: 0 4px;
        color: #3370ff
    }

    .employee-leave-balance__page .ant-table .ant-table-tbody > tr > td .anticon {
        margin-left: 3px
    }

    .employee-leave-balance__page .ant-table .ant-table-tbody > tr > td .no-employ-age, .employee-leave-balance__page .ant-table .ant-table-tbody > tr > td .no-limit, .employee-leave-balance__page .ant-table .ant-table-tbody > tr > td .no-work-age, .employee-leave-balance__page .ant-table .ant-table-tbody > tr > td > span {
        display: inline;
        margin: 0 12px
    }

    .employee-leave-balance__page .ant-table .ant-table-tbody > tr > td .ant-btn-link, .employee-leave-balance__page .ant-table .ant-table-tbody > tr > td > a {
        color: #1f2329;
        padding: 0 12px;
        height: auto;
        border: none;
        white-space: nowrap
    }

    .employee-leave-balance__page .ant-table .ant-table-tbody > tr > td .ant-btn-link:hover, .employee-leave-balance__page .ant-table .ant-table-tbody > tr > td > a:hover {
        color: #3370ff
    }

    .employee-leave-balance__page .ant-table .ant-table-tbody > tr > td .ant-btn-link:hover span:not(.exclude):after, .employee-leave-balance__page .ant-table .ant-table-tbody > tr > td > a:hover span:not(.exclude):after {
        background-color: #3370ff
    }

    .employee-leave-balance__page .ant-table .ant-table-tbody > tr > td .ant-btn-link.missing, .employee-leave-balance__page .ant-table .ant-table-tbody > tr > td > a.missing {
        white-space: nowrap
    }

    .employee-leave-balance__page .ant-table .ant-table-tbody > tr > td .ant-btn-link.missing, .employee-leave-balance__page .ant-table .ant-table-tbody > tr > td .ant-btn-link.missing:hover, .employee-leave-balance__page .ant-table .ant-table-tbody > tr > td > a.missing, .employee-leave-balance__page .ant-table .ant-table-tbody > tr > td > a.missing:hover {
        color: #f54a45
    }

    .employee-leave-balance__page .ant-table .ant-table-tbody > tr > td:not(:first-child) span:not(.exclude) {
        text-decoration: underline
    }

    .employee-leave-balance__page .ant-table .ant-table-tbody > tr.disabled > td {
        background-color: #fff
    }

    .employee-leave-balance__page .ant-tree-node-selected {
        background-color: #fff !important;
        color: #4575f6 !important
    }

    .employee-leave-balance__page .ant-pagination-item-active {
        color: #4575f6;
        border-color: #4575f6
    }

    .employee-leave-balance__page .ant-pagination-item-active a {
        color: #4575f6
    }

    .employee-leave-balance__page .ant-select-selection--multiple {
        height: 32px
    }

    .employee-leave-balance__page .ant-select-selection--multiple .ant-select-selection__rendered {
        opacity: 0;
        height: 32px
    }

    .employee-leave-balance__page .ant-select-selection--multiple .ant-select-selection__rendered > ul {
        height: 32px
    }

    .employee-leave-balance__page .ant-select-selection--multiple .ant-select-selection__rendered > ul .ant-select-selection__choice {
        max-width: 70px;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .employee-leave-balance__page .ant-select-selection--multiple .ant-select-selection__rendered > ul .ant-select-search.ant-select-search--inline, .employee-leave-balance__page .ant-select-selection--multiple .ant-select-selection__rendered > ul .ant-select-search.ant-select-search--inline * {
        height: 0 !important;
        -webkit-transform: scale(.1);
        transform: scale(.1)
    }

    .employee-leave-balance__page .employ-leave-balance__user-info {
        display: flex;
        align-items: center;
        width: 200px;
        line-height: 20px;
        padding-left: 12px
    }

    .employee-leave-balance__page .employ-leave-balance__user-info .ant-card-meta-detail > div:not(:last-child) {
        margin-bottom: 2px
    }

    .employee-leave-balance__page .employ-leave-balance__user-info .ant-card-meta-avatar {
        padding-right: 12px;
        cursor: pointer
    }

    .employee-leave-balance__page .employ-leave-balance__user-info .ant-card-meta-title {
        font-size: 14px;
        font-weight: 400;
        color: #1f2329
    }

    .employee-leave-balance__page .employ-leave-balance__user-info .ant-card-meta-description {
        font-size: 12px;
        color: #8f959e
    }

    .employee-leave-balance__page .employ-leave-balance__user-info .ant-tooltip-open {
        width: 100%;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .employee-leave-balance__page .table-header {
        font-weight: 400;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        width: 100%;
        line-height: 28px;
        white-space: nowrap
    }

    .employee-leave-balance__page .ant-table-placeholder {
        margin: auto
    }

    .balance-log-notify {
        max-width: 300px
    }

    .balance-log-notify .ant-popover-arrow {
        border-color: #4e83fd !important
    }

    .balance-log-notify .ant-popover-inner {
        background-color: #4e83fd;
        border-radius: 8px;
        box-shadow: 0 8px 16px 0 rgba(78, 131, 253, .3)
    }

    .balance-log-notify .ant-popover-buttons {
        margin-bottom: 0
    }

    .balance-log-notify .ant-popover-message {
        color: #fff;
        padding: 0 0 16px
    }

    .balance-log-notify .ant-popover-message-title {
        padding: 0
    }

    .balance-log-notify .ant-popover-buttons .ant-btn {
        color: #3370ff;
        padding: 3px 18px;
        line-height: 22px;
        font-size: 12px;
        font-weight: 500;
        height: auto;
        border: none
    }

    .balance-log-notify .ant-popover-buttons .ant-btn:not(.ant-btn-default) {
        display: none
    }

    .balance-log-notify .ant-popover-inner-content {
        padding: 16px 20px 20px
    }

    .balance-log-notify .balance-log-notify-content {
        font-size: 14px;
        line-height: 1.5
    }

    .balance-log-notify .balance-log-notify-content .header {
        opacity: .8;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
        font-size: 16px
    }

    .balance-log-notify .balance-log-notify-content .header .anticon {
        padding: 4px
    }

    .profile-card-spin {
        width: 320px;
        height: 500px;
        border-radius: 4px;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .08);
        display: flex;
        align-items: center;
        justify-content: center
    }

    .ant-modal-wrap.modify-balance .ant-modal {
        min-width: 540px
    }

    .ant-modal-wrap.modify-balance .ant-modal-header {
        background-color: #eff0f1;
        border: none;
        display: flex;
        justify-content: center
    }

    .ant-modal-wrap.modify-balance .ant-modal-header .ant-modal-title {
        color: #1f2329;
        font-size: 18px
    }

    .ant-modal-wrap.modify-balance .ant-modal-body {
        padding: 26px 28px 0
    }

    .ant-modal-wrap.modify-balance .ant-modal-footer {
        border: none;
        padding: 0 28px 28px
    }

    .ant-modal-wrap.modify-balance .ant-modal-footer button + button {
        margin-left: 16px
    }

    .ant-modal-wrap.modify-balance .ant-modal-footer .ant-btn {
        padding: 5px 36px
    }

    .ant-modal-wrap.modify-balance .mini-input {
        width: 160px;
        margin-right: 12px
    }

    .ant-modal-wrap.modify-balance .mini-select {
        width: auto;
        min-width: 160px
    }

    .ant-modal-wrap.modify-balance .mini-select .ant-select-arrow {
        color: #646a73
    }

    .ant-modal-wrap.modify-balance .ant-form-item {
        padding-bottom: 0
    }

    .ant-modal-wrap.modify-balance .expire-time-tip {
        color: #8f959e;
        margin-top: 6px
    }

    .ant-modal-wrap.modify-balance textarea {
        resize: none
    }

    .ant-popover.operator-profile .ant-popover-arrow {
        display: none
    }

    .ant-popover.operator-profile, .ant-popover.operator-profile .ant-popover-content, .ant-popover.operator-profile .ant-popover-inner {
        background-color: initial;
        box-shadow: none
    }

    .ant-popover.operator-profile .ant-popover-inner-content {
        padding: 0;
        background-color: #fff
    }

    .ant-popover.operator-profile .suite-profile-name {
        color: #fff;
        font-weight: 400
    }

    .ant-popover.operator-profile .suite-profile-header-wrapper-enlarge {
        cursor: default
    }

    .balance-log {
        position: absolute;
        top: 0;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        width: 100%;
        max-width: 1000px;
        background-color: #fff;
        min-height: 100%;
        display: flex;
        flex-direction: column
    }

    .balance-log .ant-card-meta-avatar {
        cursor: pointer
    }

    .balance-log .ant-btn.outline {
        color: #3370ff;
        background-color: #fff;
        border-color: #3370ff;
        text-shadow: none;
        box-shadow: none
    }

    .balance-log .ant-spin {
        align-self: center;
        flex: 1 1;
        display: flex;
        align-items: center
    }

    .balance-log .ant-card-head {
        padding: 0;
        color: #1f2329;
        cursor: pointer;
        font-weight: 400;
        border-bottom: 1px solid #e4e5e7
    }

    .balance-log .ant-card-body {
        padding: 24px 0
    }

    .balance-log .ant-card-body .ant-tabs-tab {
        margin: 0 52px 0 0;
        padding: 10px;
        line-height: 20px
    }

    .balance-log .ant-card-body .ant-tabs-ink-bar {
        bottom: 2px
    }

    .balance-log .ant-card-body .ant-tabs-bar {
        border-color: #e4e5e7
    }

    .balance-log .ant-card-body .ant-card-meta {
        display: flex;
        align-items: center;
        line-height: 1.5
    }

    .balance-log .ant-card-body .ant-card-meta .ant-card-meta-title {
        font-weight: 500;
        color: #1f2329;
        margin-bottom: 2px
    }

    .balance-log .ant-card-body .ant-card-meta .ant-card-meta-description {
        color: #8f959e;
        font-size: 12px
    }

    .balance-log .ant-card-body .balance-log-tabs {
        margin-top: 24px
    }

    .balance-log .ant-card-body .balance-log-tabs .summary {
        display: flex;
        align-items: center
    }

    .balance-log .ant-card-body .balance-log-tabs .summary .current-balance {
        font-size: 14px
    }

    .balance-log .ant-card-body .balance-log-tabs .summary .modify {
        margin-left: 16px
    }

    .balance-log .ant-card-body .balance-log-tabs .summary .grow {
        flex: 1 1
    }

    .balance-log .ant-card-body .balance-log-tabs .balance-log-table {
        margin: 16px 0
    }

    .balance-log .ant-card-body .balance-log-tabs .balance-log-table .ant-table {
        line-height: 20px;
        border-radius: 4px;
        border: 1px solid #e4e5e7
    }

    .balance-log .ant-card-body .balance-log-tabs .balance-log-table .ant-table .ant-table-thead > tr > th {
        font-weight: 400;
        color: #646a73;
        padding: 10px 16px
    }

    .balance-log .ant-card-body .balance-log-tabs .balance-log-table .ant-table .ant-table-tbody > tr > td {
        height: 65px;
        padding: 12px 16px;
        max-width: 164px
    }

    .balance-log .ant-card-body .balance-log-tabs .balance-log-table .ant-table .ant-table-tbody > tr > td:nth-child(5) {
        max-width: 254px
    }

    .balance-log .ant-card-body .balance-log-tabs .balance-log-table .ant-table .ant-table-footer {
        background-color: #fff;
        color: #8f959e;
        border-top: none
    }

    .balance-log .ant-card-body .balance-log-tabs .balance-log-table .ant-table .ant-table-footer:before {
        content: none
    }

    .balance-log .ant-card-body .balance-log-tabs .balance-log-table .ant-table .amount-info {
        display: flex;
        flex-direction: column;
        align-items: flex-start
    }

    .balance-log .ant-card-body .balance-log-tabs .balance-log-table .ant-table .amount-info .expire {
        color: #8f959e
    }

    .balance-log .ant-card-body .balance-log-tabs .rule {
        color: #646a73
    }

    .balance-log .no-limit {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: calc(100vh - 260px);
        justify-content: center
    }

    .balance-log .no-limit .ant-empty-image {
        height: 135px;
        width: 135px;
        margin-bottom: 0
    }

    .balance-log .no-limit .ant-empty {
        margin: 0;
        flex-basis: 360px
    }

    .balance-log .no-limit .ant-empty, .balance-log .no-limit .ant-empty .empty-description {
        display: flex;
        align-items: center;
        flex-direction: column
    }

    .balance-log .no-limit .ant-empty .empty-description > * {
        margin-top: 16px
    }

    .balance-log .no-limit .ant-empty-description {
        color: #1f2329
    }

    .LeaveManagementConfirmModal .ant-modal {
        width: 420px !important;
        margin: 0;
        padding: 0
    }

    .LeaveManagementConfirmModal .ant-modal .ant-modal-content {
        border-radius: 4px;
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .2)
    }

    .LeaveManagementConfirmModal .ant-modal .ant-modal-content .ant-modal-body {
        padding: 0
    }

    .LeaveManagementConfirmModal .title-with-icon {
        padding: 28px 0 0 28px
    }

    .LeaveManagementConfirmModal .title-with-icon .iconfont-approval-admin {
        display: inline-block;
        width: 24px;
        height: 24px;
        line-height: 24px;
        font-size: 24px;
        vertical-align: middle
    }

    .LeaveManagementConfirmModal .title-with-icon span {
        display: inline-block;
        margin-left: 16px;
        line-height: 24px;
        font-weight: 500;
        font-size: 16px;
        color: #161f31;
        vertical-align: middle;
        overflow-wrap: break-word;
        width: 80%
    }

    .LeaveManagementConfirmModal .content {
        margin: 12px 28px 12px 68px;
        width: 324px;
        font-size: 14px;
        line-height: 22px;
        color: #7f838b
    }

    .LeaveManagementConfirmModal .footer-btns {
        margin-top: 28px;
        padding: 0 28px 28px 0;
        text-align: right
    }

    .LeaveManagementConfirmModal .footer-btns button {
        margin-left: 16px
    }

    .LeaveManagementConfirmModal .checkbox-wrapper {
        margin: 12px 28px 12px 68px
    }

    .LeaveManagementConfirmModal .checkbox-wrapper .ant-checkbox-wrapper {
        color: #161f31;
        font-size: 14px;
        line-height: 22px
    }

    .LeaveManagementConfirmModal .checkbox-wrapper .ant-checkbox-wrapper:hover .ant-checkbox-inner {
        border-color: #4575f6
    }

    .LeaveManagementConfirmModal .checkbox-wrapper .ant-checkbox-wrapper:not(:hover):not(.ant-checkbox-wrapper-checked) .ant-checkbox-input:focus + .ant-checkbox-inner {
        border-color: #d9d9d9
    }

    .LeaveManagementConfirmModal .checkbox-wrapper .ant-checkbox-wrapper-checked .ant-checkbox-inner {
        border-color: #4575f6;
        background-color: #4575f6
    }

    .LeaveTypeEditor {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding: 0 100px;
        background-color: #fff
    }

    .LeaveTypeEditor .ant-card {
        width: 100%
    }

    .LeaveTypeEditor .ant-card-head {
        padding: 0;
        color: #646a73;
        cursor: pointer
    }

    .LeaveTypeEditor .ant-card-body {
        text-align: center
    }

    .LeaveTypeEditor .ant-form-item {
        margin-bottom: 0
    }

    .LeaveTypeEditor .editor {
        width: 550px;
        text-align: left;
        display: inline-block
    }

    .LeaveTypeEditor .title {
        font-size: 20px;
        font-weight: 500;
        line-height: 28px;
        color: #1f2329;
        margin-bottom: 36px
    }

    .LeaveTypeEditor .item {
        margin: 0 0 24px;
        display: flex;
        flex-direction: column
    }

    .LeaveTypeEditor .item .label {
        color: #1f2329;
        font-size: 14px;
        margin-bottom: 8px
    }

    .LeaveTypeEditor .item .label.required:after {
        content: "*";
        color: #f5222d
    }

    .LeaveTypeEditor .item .right-group {
        display: inline-block
    }

    .LeaveTypeEditor .item .right-group .text {
        font-size: 14px;
        line-height: 22px;
        color: #757575
    }

    .LeaveTypeEditor .item .right-group .text.strong {
        color: #212121
    }

    .LeaveTypeEditor .item .right-group .tip {
        margin-top: 12px;
        font-size: 14px;
        line-height: 18px;
        color: #9ca2a9
    }

    .LeaveTypeEditor .item .right-group .addition-line {
        margin-top: 12px
    }

    .LeaveTypeEditor .footer-btns {
        margin: 40px 0
    }

    .LeaveTypeEditor .footer-btns button {
        margin-right: 16px
    }

    .LeaveTypeEditor .input-wrapper input {
        width: 100%;
        height: 36px;
        padding: 6px 11px;
        border: 1px solid #e8e8e8;
        border-radius: 4px;
        box-shadow: none;
        color: #212121;
        line-height: 22px
    }

    .LeaveTypeEditor .input-wrapper input:focus, .LeaveTypeEditor .input-wrapper input:hover {
        border-color: #4c84f7
    }

    .LeaveTypeEditor .input-wrapper input::-webkit-input-placeholder {
        color: #ccc
    }

    .LeaveTypeEditor .input-wrapper input::-moz-placeholder {
        color: #ccc
    }

    .LeaveTypeEditor .input-wrapper input::-ms-input-placeholder {
        color: #ccc
    }

    .LeaveTypeEditor .input-wrapper input::placeholder {
        color: #ccc
    }

    .LeaveTypeEditor .input-wrapper.two-digits {
        display: inline-block;
        margin: 0 12px
    }

    .LeaveTypeEditor .input-wrapper.two-digits input {
        width: 38px;
        padding: 6px 0;
        text-align: center
    }

    .LeaveTypeEditor .item.wrong .input-wrapper input {
        border-color: #f5222d
    }

    .LeaveTypeEditor .select-wrapper {
        color: #1f2329
    }

    .LeaveTypeEditor .select-wrapper.small {
        display: inline-block
    }

    .LeaveTypeEditor .select-wrapper.small:not(:first-child) {
        margin-left: 12px
    }

    .LeaveTypeEditor .select-wrapper.small:not(:last-child) {
        margin-right: 12px
    }

    .LeaveTypeEditor .select-wrapper.small .ant-select {
        width: 55px
    }

    .LeaveTypeEditor .select-wrapper .approval-select {
        display: inline;
        display: initial
    }

    .LeaveTypeEditor .select-wrapper .ant-select {
        width: 100%;
        color: #212121
    }

    .LeaveTypeEditor .select-wrapper .ant-select .ant-select-selection {
        height: 36px;
        border: 1px solid #e8e8e8;
        border-radius: 4px;
        box-shadow: none
    }

    .LeaveTypeEditor .select-wrapper .ant-select .ant-select-selection:focus, .LeaveTypeEditor .select-wrapper .ant-select .ant-select-selection:hover {
        border-color: #4c84f7
    }

    .LeaveTypeEditor .select-wrapper .ant-select .ant-select-selection .ant-select-selection__rendered {
        line-height: 34px;
        margin: 0 11px
    }

    .LeaveTypeEditor .spin {
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 1
    }

    .cliptext-select-dropdown .ant-select-dropdown-menu-item {
        text-overflow: clip
    }

    .LeaveApprovalDefinition {
        width: 420px
    }

    .LeaveApprovalDefinition .ant-modal-content {
        padding: 28px
    }

    .LeaveApprovalDefinition .ant-modal-footer, .LeaveApprovalDefinition .ant-modal-header {
        padding: 0;
        border-width: 0
    }

    .LeaveApprovalDefinition .ant-modal-body {
        padding: 0 0 0 40px
    }

    .LeaveApprovalDefinition .title {
        font-weight: 700;
        display: flex;
        align-items: center
    }

    .LeaveApprovalDefinition .anticon.anticon-info-circle {
        font-size: 24px;
        color: #ffc60a;
        padding-right: 16px
    }

    .LeaveApprovalDefinition .subtitle {
        font-size: 14px;
        color: #373c43;
        margin: 10px 0 26px;
        width: 100%
    }

    .LeaveApprovalDefinition .content-box {
        display: flex;
        flex-flow: row wrap;
        min-height: 9em
    }

    .LeaveApprovalDefinition .content-item {
        width: 33%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0 10px 0 0;
        margin: 10px 0
    }

    .LeaveApprovalDefinition .btn-primary {
        background-color: #3370ff;
        border-color: #3370ff;
        color: #fff;
        width: 100px
    }

    .leave-type-editor {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding: 0 100px;
        background-color: #fff
    }

    .leave-type-editor .spin {
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 1
    }

    .leave-type-editor .divide-line {
        border: 1px dashed #dee0e3;
        width: 100%;
        margin: 1em 0
    }

    .leave-type-editor .ant-spin.ant-spin-spinning.spin {
        max-height: 100%
    }

    .leave-type-editor .ant-card {
        width: 100%
    }

    .leave-type-editor .ant-card-head {
        padding: 0;
        color: #646a73;
        cursor: pointer
    }

    .leave-type-editor .ant-card-body {
        text-align: center
    }

    .leave-type-editor .ant-form-item {
        margin-bottom: 0
    }

    .leave-type-editor .editor {
        width: 750px;
        text-align: left;
        display: inline-block
    }

    .leave-type-editor .title {
        font-size: 20px;
        font-weight: 500;
        line-height: 28px;
        color: #1f2329;
        margin-bottom: 36px
    }

    .leave-type-editor .tip {
        color: #8f959e;
        font-size: 14px;
        line-height: 28px
    }

    .leave-type-editor .ant-row.ant-form-item {
        margin-top: 20px
    }

    .leave-type-editor .ant-select {
        width: 100%
    }

    .leave-type-editor .mini-select {
        width: auto;
        min-width: 120px;
        margin: 0 6px
    }

    .leave-type-editor .mini-select + .mini-select {
        margin-left: 0
    }

    .leave-type-editor .mini-input {
        width: 120px;
        margin: 0 6px
    }

    .leave-type-editor .mini-input + .mini-select {
        margin-left: 0
    }

    .leave-type-editor .extend-quota {
        margin-top: 6px
    }

    .leave-type-editor .ant-calendar-picker {
        margin: 0 8px
    }

    .leave-type-editor .rule-conf .ant-form-item-children {
        display: flex;
        align-items: center
    }

    .leave-type-editor .rule-conf-help {
        color: #646a73;
        -webkit-transition: color .2s ease-out;
        transition: color .2s ease-out;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        margin-bottom: 6px;
        margin-top: 2px
    }

    .leave-type-editor .rule-conf-help:hover {
        color: #1f2329
    }

    .leave-type-editor .rule-conf-help .anticon {
        font-size: 16px;
        line-height: 1;
        margin-right: 4px
    }

    .leave-type-editor .work-age-quota .item {
        margin: 6px 0
    }

    .leave-type-editor .work-age-quota .item:first-child {
        margin-top: 2px
    }

    .leave-type-editor .work-age-quota .delete-link {
        margin-left: 24px;
        color: #646a73
    }

    .leave-type-editor .work-age-quota .add-link {
        margin-top: 14px;
        margin-bottom: 7px
    }

    .leave-type-editor .ant-form-item.from-item-top-less {
        margin-top: 2px
    }

    .leave-type-editor .ant-form-item.from-item-top-less .ant-form-item-control {
        line-height: 2em
    }

    .leave-type-editor .set-month-day-by-year .ant-select:first-of-type {
        min-width: 120px
    }

    .leave-type-editor .set-day-by-month.en .ant-select:first-of-type, .leave-type-editor .set-day-by-month.en_us .ant-select:first-of-type, .leave-type-editor .set-month-day-by-year .ant-select:nth-of-type(2) {
        min-width: 120px;
        margin-left: 0
    }

    .leave-type-editor .balance-offer-rule-time-calc .ant-form-item-control {
        font-size: 14px;
        line-height: 26px
    }

    .leave-type-editor .footer-btns {
        margin: 40px 0
    }

    .leave-type-editor .footer-btns button.ant-btn {
        width: 100px;
        margin-right: 16px
    }

    .leave-type-editor .ant-alert {
        margin: 12px 0
    }

    .leave-type-editor .ant-alert.old-expire-rule-warning {
        margin-top: 4px
    }

    .leave-type-editor .ant-select-arrow {
        color: #1f2329
    }

    .leave-type-editor .ant-form-item-label {
        line-height: normal;
        margin-bottom: 2px
    }

    .leave-type-editor .ant-radio-wrapper {
        margin-right: 28px
    }

    .leave-type-editor .ant-radio-inner {
        border-color: #8f959e
    }

    .leave-type-editor .ant-radio-checked .ant-radio-inner {
        border-color: #3370ff;
        background-color: #3370ff
    }

    .leave-type-editor .ant-radio-checked .ant-radio-inner:after {
        width: 6px;
        height: 6px;
        left: 4px;
        top: 4px;
        background-color: #fff
    }

    .leave-type-editor .ant-radio-checked:after {
        border-color: #3370ff
    }

    .rule-conf-help-tooltip {
        min-width: 254px;
        font-size: 12px;
        line-height: 18px
    }

    .rule-conf-help-tooltip .ant-tooltip-inner {
        padding: 8px 12px
    }

    .LeaveManagement {
        width: 100%;
        max-width: 1000px
    }

    .LeaveManagement.forEmployeeLeaveBalance {
        height: 100%;
        display: flex;
        flex-direction: column
    }

    .price-plan-page {
        width: 100%;
        max-width: 1000px;
        padding: 0 0 60px
    }

    .price-plan-page h1, .price-plan-page h2, .price-plan-page h3, .price-plan-page h4, .price-plan-page h5, .price-plan-page h6 {
        line-height: 1
    }

    .section-introduction {
        padding: 40px 0 10px
    }

    .section-introduction .introduction-section-header {
        margin: 0 0 40px;
        text-align: center
    }

    .section-introduction .introduction-section-header h2 {
        margin: 0 0 18px;
        font-size: 18px;
        color: #141f33
    }

    .section-introduction .introduction-section-header p {
        font-size: 14px;
        color: #9ca2a9
    }

    .introduction-block {
        width: 100%;
        margin: 0 0 30px;
        box-shadow: 0 1px 5px rgba(156, 162, 169, .29)
    }

    .introduction-block .intro-header {
        padding: 30px;
        display: flex;
        align-items: center
    }

    .introduction-block .intro-header img {
        max-width: 120px;
        margin: 0 46px 0 0
    }

    .introduction-block .intro-header .intro-header-center {
        flex-grow: 1
    }

    .introduction-block .intro-header .intro-title {
        margin: 0 70px 10px 0;
        font-size: 24px;
        color: #3370ff
    }

    .introduction-block .intro-header .intro-desc {
        font-size: 14px;
        color: #9ca2a9
    }

    .introduction-block .intro-header .toggle-intro-btn {
        padding: 0 20px;
        border-radius: 20px;
        display: flex;
        align-items: center;
        border-color: #3370ff;
        color: #3370ff;
        font-size: 14px
    }

    .introduction-block .intro-header .toggle-intro-btn i {
        margin: 0 0 0 4px;
        -webkit-transform: scale(.7);
        transform: scale(.7)
    }

    .introduction-block .intro-content {
        max-height: 0;
        overflow: hidden;
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        background: #f9fafb
    }

    .introduction-block .intro-content .intro-detail {
        padding: 35px 54px 40px;
        font-size: 14px;
        color: #9ca2a9
    }

    .introduction-block .intro-content .ant-tabs-nav-wrap {
        padding: 0 54px
    }

    .introduction-block .intro-content .ant-tabs-bar {
        margin: 0 0 40px
    }

    .introduction-block .intro-content .ant-tabs-tab {
        font-size: 18px;
        line-height: 60px;
        margin: 0 70px 0 0;
        padding: 0
    }

    .introduction-block .intro-content .ant-tabs-tabpane {
        padding: 0 54px 52px
    }

    .introduction-block .intro-content .image-slide {
        max-height: 410px
    }

    .introduction-block .intro-content .image-slide img {
        max-width: 100%;
        max-height: 100%
    }

    .introduction-block .intro-content .tab-content {
        margin: 0 0 32px;
        font-size: 14px;
        color: #9ca2a9
    }

    .introduction-block .intro-content .carousel-wrap {
        position: relative
    }

    .introduction-block .intro-content .carousel-wrap .carousel-nav {
        width: 46px;
        height: 46px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(20, 31, 51, .2);
        cursor: pointer;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        margin: -23px 0 0
    }

    .introduction-block .intro-content .carousel-wrap .carousel-nav .icon-arrow {
        font-size: 28px;
        color: #fff
    }

    .introduction-block .intro-content .carousel-wrap .carousel-nav-prev {
        left: 30px
    }

    .introduction-block .intro-content .carousel-wrap .carousel-nav-prev .icon-arrow {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }

    .introduction-block .intro-content .carousel-wrap .carousel-nav-next {
        right: 30px
    }

    .introduction-block.introduction-block-expand .toggle-intro-btn i {
        -webkit-transform: scale(.7) rotate(180deg);
        transform: scale(.7) rotate(180deg)
    }

    .introduction-block.introduction-block-expand .intro-content {
        max-height: 800px
    }

    .tabs-wrapper {
        width: 100%;
        height: 46px
    }

    .tabs-wrapper .tabs-inner {
        display: flex;
        flex-direction: row;
        align-items: center;
        color: #1f2329;
        height: 46px;
        font-size: 14px;
        line-height: 22px;
        border-bottom: 1px solid #e4e5e7
    }

    .tabs-wrapper .tab-item {
        position: relative;
        margin-right: 40px;
        padding: 12px 0;
        height: 46px;
        border-bottom: 2px solid transparent;
        cursor: pointer
    }

    .tabs-wrapper .tab-item.active {
        color: #3370ff;
        border-color: #3370ff
    }

    .tabs-wrapper .tab-item:hover {
        color: #3370ff
    }

    .work-management-list .condition-wraper {
        width: 100%;
        padding: 16px 0
    }

    .work-management-list .table-wrapper .ant-table-tbody > tr > td:last-child {
        width: 140px
    }

    .work-management-list .table-wrapper .nameWraper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        word-break: break-all;
        max-width: 400px
    }

    .work-management-list .table-wrapper .tag {
        padding: 0 8px;
        height: 22px;
        color: #646a73;
        text-align: center;
        border: 1px dashed #e4e5e7;
        border-radius: 2px
    }

    .work-management-list .table-wrapper .rule-contents li {
        word-break: break-all;
        text-overflow: ellipsis
    }

    .work-management-detail-list {
        width: 100%;
        min-width: 1100px
    }

    .work-management-detail-list .condition-wraper {
        position: relative;
        padding: 16px 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        color: #1f2329;
        font-size: 14px;
        line-height: 20px
    }

    .work-management-detail-list .item-wraper {
        margin-right: 32px;
        display: inline-block
    }

    .work-management-detail-list .item-wraper .member-choose, .work-management-detail-list .item-wraper .picker {
        width: 240px;
        margin-left: 4px
    }

    .work-management-detail-list .lark-button {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        border: 1px solid #3370ff;
        background-color: #fff;
        color: #3370ff
    }

    .work-management-detail-list .lark-button:hover {
        background-color: #e1eaff
    }

    .work-management-detail-list .lark-button:focus {
        background-color: #bacefd
    }

    .work-management-detail-list .table-wrapper .ant-table-tbody > tr .line-wraper {
        min-height: 28px
    }

    .work-management-detail-list .table-wrapper .ant-table-tbody > tr .line:not(:last-child) {
        margin-bottom: 8px
    }

    .work-management-detail-list .en-title {
        display: flex;
        flex-direction: column;
        align-items: flex-start
    }

    .ASwitch {
        display: flex;
        height: 22px;
        flex-direction: row;
        align-items: center
    }

    .ASwitch .label {
        margin-right: 8px
    }

    .punch-config-wraper {
        color: #646a73
    }

    .punch-config-wraper .line {
        margin-top: 8px;
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 32px
    }

    .punch-config-wraper .line:last-child {
        margin-top: 8px
    }

    .punch-config-wraper .line .input-wraper {
        margin: 0 8px
    }

    .resttimes-wraper {
        margin-top: 10px
    }

    .resttimes-wraper .resttime-line {
        margin-bottom: 16px
    }

    .resttimes-wraper .resttime-line .resttime-line-inner {
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 32px
    }

    .resttimes-wraper .resttime-line:last-child {
        margin-bottom: 0
    }

    .resttimes-wraper .resttime-line.error-line .ant-time-picker-input {
        border-color: #f5222d
    }

    .resttimes-wraper .resttime-line .error {
        display: block;
        padding-left: 4px;
        margin-top: 8px;
        margin-bottom: -8px;
        color: #f5222d
    }

    .resttimes-wraper .timePicker {
        border-color: #e4e5e7;
        width: 105px
    }

    .resttimes-wraper .divide {
        display: inline-block;
        margin: 0 8px;
        width: 8px;
        height: 2px;
        background: #9ca2a9
    }

    .resttimes-wraper .operation-wraper .icon {
        margin-left: 10px;
        width: 20px;
        height: 20px
    }

    .resttimes-wraper .operation-wraper .icon svg {
        width: 100%;
        height: 100%
    }

    .special-day-modal {
        font-size: 14px;
        line-height: 20px;
        color: #1f2329
    }

    .special-day-modal .ant-modal-header {
        padding: 16px 0;
        text-align: center;
        border: none;
        background: #f6f6f7
    }

    .special-day-modal .ant-modal-header .ant-modal-title {
        font-size: 18px;
        line-height: 25px;
        color: #161f31
    }

    .special-day-modal .ant-modal-body {
        padding: 24px 40px;
        height: 322px;
        overflow-y: overlay
    }

    .special-day-modal .ant-modal-footer {
        padding: 16px 40px 40px;
        border: none
    }

    .special-day-modal .ant-modal-footer .ant-btn {
        width: 100px;
        height: 32px;
        margin-right: 16px
    }

    .special-day-modal .left, .special-day-modal .right {
        width: 240px
    }

    .special-day-modal .item-line, .special-day-modal .label-line, .special-day-modal .operation-wraper {
        display: flex;
        flex-direction: row;
        align-items: center
    }

    .special-day-modal .left {
        margin-right: 16px
    }

    .special-day-modal .label-line {
        margin-bottom: 8px
    }

    .special-day-modal .item-line {
        margin-bottom: 16px;
        height: 32px
    }

    .special-day-modal .operation-wraper {
        display: inline-flex;
        width: 52px;
        flex-direction: row-reverse;
        align-items: center;
        margin-left: 18px
    }

    .special-day-modal .operation-wraper .icon {
        width: 20px;
        height: 20px
    }

    .special-day-modal .operation-wraper .icon svg {
        width: 100%;
        height: 100%
    }

    .special-day-modal .operation-wraper .icon:first-child {
        margin-left: 12px
    }

    .ellipsis-wraper {
        width: 100%;
        overflow: hidden;
        position: relative;
        display: -webkit-box;
        text-overflow: ellipsis;
        white-space: normal
    }

    .ellipsis-wraper .ellipsis-txt {
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
        width: 100%;
        display: inline-block;
        color: transparent;
        word-break: break-all;
        white-space: normal
    }

    .ellipsis-wraper .ellipsis-tooltip {
        max-width: 500px;
        padding-top: 0
    }

    .specialday-list-wraper {
        margin: 0 20px;
        border-bottom: 1px solid #e4e5e7;
        font-size: 14px;
        line-height: 20px
    }

    .specialday-list-wraper .link-title {
        padding: 20px 0;
        color: #3370ff;
        height: 20px;
        cursor: pointer
    }

    .specialday-list-wraper .list-wraper {
        margin-top: -4px;
        padding: 16px 0 8px;
        clear: both
    }

    .specialday-list-wraper .list-wraper:after {
        content: "";
        height: 0;
        display: block;
        clear: both
    }

    .specialday-list-wraper .date-item {
        display: inline-flex;
        margin-bottom: 12px;
        align-items: center;
        width: 50%;
        text-align: left;
        color: #646a73
    }

    .specialday-list-wraper .date-item .date-name {
        max-width: calc(100% - 210px);
        padding-right: 2px
    }

    .specialday-list-wraper .date-item .date-name.date-item-jp {
        max-width: calc(100% - 228px)
    }

    .specialday-list-wraper .expand-item {
        float: right;
        display: inline-flex;
        align-items: center;
        color: #9ca2a9;
        cursor: pointer
    }

    .specialday-list-wraper .expand-item .anticon {
        margin-left: 4px
    }

    .subrule-wrapper {
        width: 100%;
        border: 1px solid #e4e5e7;
        border-radius: 4px
    }

    .subrule-wrapper .subrule-tabs .tabs-inner {
        padding: 0 16px
    }

    .subrule-wrapper .subrule-content {
        padding: 20px 16px 25px;
        font-size: 14px;
        line-height: 20px;
        color: #1f2329
    }

    .subrule-wrapper .subrule-content .box {
        margin-top: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #e4e5e7
    }

    .subrule-wrapper .subrule-content .box .line-label {
        margin-bottom: 8px
    }

    .subrule-wrapper .subrule-content .box .radio-group-wraper {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-top: 16px
    }

    .subrule-wrapper .subrule-content .box .radio-group-wraper .ant-radio {
        margin-top: 8px;
        color: #646a73
    }

    .subrule-wrapper .subrule-content .box .radio-group-wraper .ant-radio-wrapper {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        align-self: flex-start;
        min-height: 32px;
        line-height: 32px;
        margin-bottom: 10px
    }

    .subrule-wrapper .subrule-content .box .radio-group-wraper .ant-radio-wrapper:last-child {
        margin-bottom: 0
    }

    .subrule-wrapper .subrule-content .box .radio-inner-select {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap
    }

    .subrule-wrapper .subrule-content .box:last-child {
        border-bottom: none;
        padding-bottom: 0
    }

    .member-choose {
        width: 100%;
        cursor: pointer
    }

    .work-rule-editor-wraper .ant-card {
        margin-top: -20px;
        width: 100%
    }

    .work-rule-editor-wraper .ant-card .ant-card-head {
        padding: 0;
        border-color: #eee
    }

    .work-rule-editor-wraper .ant-card .ant-card-head .ant-card-head-title {
        padding: 20px 0;
        color: #646a73;
        font-size: 14px;
        line-height: 20px
    }

    .work-rule-editor-wraper .ant-card .ant-card-head .ant-card-head-title span {
        cursor: pointer
    }

    .work-rule-editor-wraper .ant-card .ant-card-body {
        text-align: center;
        font-size: 14px;
        line-height: 20px
    }

    .work-rule-editor-wraper .editor-inner {
        display: inline-block;
        width: 700px;
        text-align: left
    }

    .work-rule-editor-wraper .editor-inner.editor-inner-en {
        width: 840px
    }

    .work-rule-editor-wraper .editor-inner .title {
        padding: 12px 0 36px;
        font-size: 20px;
        color: #1f2329;
        line-height: 32px;
        font-weight: 500
    }

    .work-rule-editor-wraper .main-content .ant-form-item {
        color: #1f2329;
        line-height: 20px
    }

    .work-rule-editor-wraper .main-content .ant-form-item-label {
        margin-bottom: 8px;
        line-height: 20px
    }

    .work-rule-editor-wraper .main-content .ant-form-item-control .ant-input:not(:focus) {
        border-color: #e4e5e7
    }

    .work-rule-editor-wraper .main-content .extra-txt {
        color: #646a73
    }

    .work-rule-editor-wraper .footer-btns {
        margin-top: 32px
    }

    .work-rule-editor-wraper .footer-btns button {
        margin-right: 16px;
        width: 100px
    }

    .workManagement {
        width: 100%;
        max-width: 1100px
    }

    .workManagement .table-wrapper .ant-table {
        border: 1px solid #e4e5e7;
        border-bottom: none;
        border-radius: 4px
    }

    .workManagement .table-wrapper .ant-table .ant-table-thead > tr > th {
        padding: 8px 16px;
        font-size: 14px;
        line-height: 20px;
        color: #646a73;
        background-color: #f5f6f7
    }

    .workManagement .table-wrapper .ant-table .ant-table-tbody {
        font-size: 14px;
        line-height: 20px;
        color: #1f2329
    }

    .workManagement .table-wrapper .ant-table .ant-table-tbody > tr > td {
        padding: 20px 16px;
        border-bottom: 1px solid #e4e5e7;
        background-color: #fff
    }

    .workManagement .table-wrapper .ant-table .ant-table-tbody > tr > td .icon-button {
        margin-left: 16px;
        background-color: initial
    }

    .workManagement .table-wrapper .ant-table .ant-table-tbody > tr:hover > td {
        background-color: #fff
    }

    .workManagement .table-wrapper .ant-table .ant-table-tbody > tr.disabled > td {
        background-color: #f6f6f6;
        color: #a1a5ad
    }

    .workManagement .table-wrapper .ant-table-placeholder {
        padding: 150px 0
    }

    .workManagement .table-wrapper .ant-pagination {
        width: 100%;
        text-align: center;
        float: inherit
    }

    .manualApprovalEdit {
        min-height: 64vh;
        display: flex;
        flex-direction: column
    }

    .manualApprovalEdit_contentWrapper {
        flex: 1 1
    }

    .manualApprovalEdit_content {
        flex: 1 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        align-self: stretch
    }

    .manualApprovalEdit_textarea {
        flex: 1 1;
        margin-bottom: 16px;
        align-self: stretch;
        font-family: monospace
    }

    .App {
        height: 100%;
        overflow: auto
    }

    .App_crashWrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        height: 100%
    }

    .App_crashError {
        margin: 10px 0 0;
        height: 26px;
        line-height: 26px;
        font-size: 18px;
        color: #999
    }

    .ant-layout-has-sider .ant-layout-content .ant-message {
        top: 80px
    }

    .ant-layout-has-sider .ant-layout-content .ant-message-notice-content {
        margin-left: 200px
    }

    .ant-tabs .ant-tabs-bottom-content > .ant-tabs-tabpane, .ant-tabs .ant-tabs-top-content > .ant-tabs-tabpane {
        -webkit-transition: none;
        transition: none
    }

    /*# sourceMappingURL=app.e700a1c3.css.map */
    .form-design-middle {
        width: 100%;
        height: 100%;
    }

    .fade-enter-active, .fade-leave-active {
        transition: opacity .3s;
    }

    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
    {
        opacity: 0;
    }

    .form-empty {
        position: absolute;
        text-align: center;
        width: 300px;
        font-size: 20px;
        top: 200px;
        left: 50%;
        margin-left: -150px;
        color: #ccc;
    }

    .form-name {
        line-height: 35px;
    }

    h3 {
        padding: 0px 32px;
    }

    .is_req {
        .el-form-item__label::before {
            content: '*';
            color: #f56c6c;
            margin-right: 4px;
        }
    }
</style>
